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
Related
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;
}
I found this card component example on the internet and would like to build something similar with Vuetify. I'd like to know what is the best/easiest way to approach this? Using default v-card and add custom elements/css inside.Or building the whole card with Vuetify gid?
You can recreate something similar with an outlined v-card with only a v-card-text child. The top section looks like an outlined v-alert with left border. Use v-row and v-col (col-auto on all) grid inside, with v-spacer for the whitespace after first column. Bottom section will also have the grid. You could also put the v-alert inside v-card-title for similar effect but I don't think the banner alert is appropriate as a "card title".
Vuetify is a Vue UI library that provides ready-to-use components saving the developer time. So if the components Vuetify makes available to you are fine out of the box, you're fine, otherwise there's nothing wrong with adding custom CSS. In reference to the screenshot you attached, vuetify allows you to make that card in a practically identical way. In addition to studying the functioning of the basic components, I recommend that you take a look at the ready-made CSS classes that Vuetify provides you. Thanks to those you can do a lot of things. I hope I was helpful.
What is the correct way to handle this ? for example, in Tailwind you use w-3/5 and w-2/5 to set two divs with 60% and 40%.
In Vuetify i'm trying to accomplish this by making both divs fluid with a max-width of what I consider being the 60 and 40...
I know this probably is very bad, but I couldn't find another way to workaround this.
something like this
Try to create v-container (fluid if you prefer). Inside of container create v-row. Inside of v-row you can create v-col elements. Vuetify grid is quite similar to bootstrap grid. It has 12-columns grid. So you can't divide 12 to 5 but you can make something very similar :)
Following link would help you to get used to the grid:
https://vuetifyjs.com/en/components/grids/
As suggested in documentation, i have tried below properties first.
this.gridOptions.rowHeight = 25;
this.gridOptions.headerHeight= 28;
But it ended up like below:
grid
We have also tried the material css property changes, but didnt see any reflection to the grid.
$ag-mat-grid-size: 4px;
$ag-mat-icon-size: 12px;
Please give us the suggestion here.
Try providing those properties at the grid itself.
<ag-grid-angular
[gridOptions]="myGridOptions"
[rowHeight]="25" //or [rowHeight]="hightParam"
[headerHeight]="28" //or [headerHeight]="headerHeightParam"
>
</ag-grid-angular>
I have checked it and it works.
That's why I find ag-grid kind of strange sometimes. Many of the properties they show under gridOptions under documentation, but they works only when we apply at the grid level itself. Although its performance compensates this behaviour :)
Check this working example plunk link ag-grid material theme example
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);}