v-select multiple display text if empty selection - vuetify.js

I have this <v-select multiple persistent-placeholder></v-select> component and I would like to display some custom content if selection is empty, like No entry selected yet.
Is there any chance I can achieve this? I looked at props and slots but none seem to fit my need. I tried the no-data named slot but did not work.
Thanks

Looks like the best approach with the current vuetify version is to use the placeholder as you mention in the comments. Check this codepen I made: https://codepen.io/cmfc31/pen/GROyQMa
I just added some css to make it look like an item
.no-entries input::placeholder {
color: #212121 !important;
}

Related

Need to override style of ngx datatable in two different pages not impacting each other

".ngx-datatable datatable-header{
overflow: visible !important;
}
.ngx-datatable {
overflow: visible !important;
}"
I have two ngx datatables in two different pages,And I set customized filter in one datatable header by an filter icon, Problem is the dropdown of onclick of icon is cutting the dropdown,for that I googled and got to know that its an CSS issue and can be handled. So i written the following in my Angular SCSS file for one component related.
Using this working but impacting on other ngx datatables.
Help or suggest me any one on this.
Aren't they both having separate CSS files? If that is the case, it shouldn't be affecting one another. If they are both having the same CSS file as the style sheet, provide an ID to each table and provide the same id in the CSS as well, so that the specified style gets added only to that Id.
Once you specify the ngx-datatable styles under the respective Id's, it should work.
Let me know if it worked.

Remove header/filter-button columns from Telerik UI RadDataGrid

Much what the title says. When creating a RadDataGrid using TelerikUI in Xamarin.Forms, we get a "header column".
I know the style of can be set via the HeaderStyle property, and the text itself can be hidden by setting HeaderText to an empty string, but how do we actually remove the row of columns itself? Is this possible, with or without custom renderers?
We've tried setting the HeaderStyle to different attributes in hope that it'll fix it (hidden, collapsed etc), we've also tried emptying different properties/tags to try to achieve something similar to CSS's display: none but nothing has given us results as of yet. Any and all help appreciated!
Thanks.
If you want to hide the dots, you can set the Header Style:
<telerikDataGrid:DataGridTextColumn PropertyName="Country">
<telerikDataGrid:DataGridTextColumn.HeaderStyle>
<telerikDataGrid:DataGridColumnHeaderStyle OptionsButtonTextColor="Transparent"
BorderColor="#D9D9D9"
BorderThickness="1"/>
</telerikDataGrid:DataGridTextColumn.HeaderStyle>
</telerikDataGrid:DataGridTextColumn>
In addition, if you don't use any sorting or filtering, you can disable it through these properties
UserGroupMode="Disabled"
UserFilterMode="Disabled"
UserSortMode="None"

Sticky block with Vuetify

How can I make an element sticky using Vuetify? In the new Vuetify documentation the right column is what I'd like to achieve. I couldn't find anything similar in examples.
you can do position fixed
position: fixed; in css
here is my sample pen.
https://codepen.io/anon/pen/wmKYNP
Many components there has the fixed prop.
I'm not sure which component you're trying to use but in the Vuetify docs they're using the v-navigation-drawer with fixed prop:
<v-navigation-drawer fixed>
https://vuetifyjs.com/en/components/navigation-drawers

Disabled textarea and input fields, make font more readable (instead blur)?

In several of my mvc pages, I have disable certain fields like textarea and input boxes with the "disabled" attribute that are uneditable fields. But users are complaining about the text/font being hard to read. It looks blurred and too light.
Anyone have recommendation to make diabled fields more readable?
Well, you can use CSS style for that. I suggest you to use the :disabled selector.
As an example, you can do something like this to change the color for example :
input:disabled { color: #FF0000; background: #ccc; }
You can find a good tutorial here.

QtComboBox drop-down image disable from code

I have found lots of ways to control a QtComboBox using style sheets, but not directly from code (well, you can use the setStyleSheet method).
I have a requirement to disable all widgets when a page is disabled, and I can accomplish that requirement. The problem is trying to make a QtComboBox look disabled (also a requirement).
Is there a way to change the QtComBox drop-down arrow to another image in code?
I have found that sometimes you have to implement an entire style sheet in Qt whenever you want to change one part of the widget.
Do I have to implement a disabled style sheet in code and use the setStyleSheet method?
And then, do I have to re-implement an enabled style sheet when the page is re-enabled?
It seems there should be something like: myComboBox->setDownArrowImage(url . . .);
Am I missing something?
Thanks.
Use pseudo states.
Stylesheet example:
QComboBox:enabled {color: red;}
QComboBox::down-arrow:enabled {image:url(:/images/downarrow.png);}
QComboBox::disabled {color: white;}
QComboBox::down-arrow:disabled {image:url(:/images/downarrowdisabled.png);}

Resources