I’m new to Vaadin and struggling to set Styles for different components/containers. Please suggest me:
I dynamically create a FormLayout with 2 TextFields and
The form layout is enabled with Style named “DateRangeDatesViewStyle” (using formLayout.setStyleName(“DateRangeDatesViewStyle”)
I’m using mytheme which internally imports valo themes
I disabled margin using formLayout.setMargin( false ) as the valo Margin is 25px
Now, how do I set Style using mytheme.scss file? I have mixin code and some styles for buttons, etc work.
But I’m unable to set Margin for Form Layout in SCSS file.
The following HTML tag is produced in browser (Chrome):
....
Do I need to use like this?
.v-slot-DateRangeDatesViewStyle {
padding-top: 10px;
}
The sequence of container(s) is below:
Tab → Grid Layout → 2nd Column → Vertical Layout → 1st Component is Combo box, 2nd Component is Form Layout
If I set Margin through code (as setMargin(true)) space is provided between components, but not giving me desired space.
Any suggestions?
In other UI/screens, for example, for a ComboBox, I see the computed style (in Chrome browser) looks like:
.mytheme .my-custom-style-name .v-filterselect [class*=“input”]
So i created a style as .my-custom-style-name .v-filterselect [class*=“input”]
{ color:blue} and this works fine.
But in case of (1), I don’t see the style class name in the DIV tags even though I use formLayout or verticalLayout.setStyleName( “date-range-dates-view-style”).
Am I missing anything or is it because of Grid Layout as the top level container, am I facing all these problems?