Confused on applying styles in scss file


I used to invoke layout.setStyleName( “DatePanelViewStyle” ). In some scenarios, I’m able to see the Style using HTML debugger and it works fine for the settings provided.

In many other cases, mostly when I have a Split Pane, having a Tab and with Vertical Layout, when I try to set layout to the Container, the Style is not propagated to underlying components. In some scenarios, I see the Style of the Vertical Layout (v-slot).

Even though I invoke childContainer’s Layout using setStyleName( “ChildContainerStyle” ), it applies only to the layout DIV tags. However the padding is taken from the top most Vertical Layout or if there are no margins, it behaves different.

For a child Form Layout, Im trying to set the Style (overriding the parent container) without setMargin(false).
The style looks like this when computed in debugger:

tbody > [class*=“firstrow”]
td {
padding-top: 25px;

If I use setMargin(false) explicitly, the top most DIV tag for the FormLayout looks like this:


How do I set style in such scenarios to change padding-top to 10px?
The padding-top: 25px is from the first row of the Form Layout but it disappears if the Margin is set to false.
Bit confusing and it takes lots of time for development.

Any suggestions please?