Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Style setting for Form Layout
Hello,
I'm new to Vaadin and struggling to set Styles for different components/containers. Please suggest me:
1) I dynamically create a FormLayout with 2 TextFields and
2) The form layout is enabled with Style named "DateRangeDatesViewStyle" (using formLayout.setStyleName("DateRangeDatesViewStyle")
3) I'm using mytheme which internally imports valo themes
4) I disabled margin using formLayout.setMargin( false ) as the valo Margin is 25px
5) 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):
<div class="v-slot v-slot-DateRangeDatesViewStyle">
<div class="v-formlayout v-layout v-widget DateRangeDatesViewStyle v-formlayout-DateRangeDatesViewStyle v-has-width" style="width: 100%;">
<table cellpadding="0" cellspacing="0" role="presentation" class="v-formlayout-spacing">
....
Do I need to use like this?
.v-slot-DateRangeDatesViewStyle {
padding-top: 10px;
}
Thanks,
Ananth
No, actually this should be enough.
.DateRangeDatesViewStyle {
padding-top: 10px;
}
But general convention is not to case the style names, but use kebab-casing, i.e.
formLayout.setStyleName("date-range-dates-view-style");
And then
.date-range-dates-view-style {
padding-top: 10px;
}
(Pro tip about style naming: http://getbem.com/introduction/ )
Hi Tatu,
Thank you for your suggestion.
But no luck. It did not work :(
1) 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?
2) 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?
Thank you,
Ananth