Some components make it pretty hard to control margins and padding :-(

Flow
1

As I wrote in another thread I am trying to squeeze one of my forms to fit more data onto the screen.
Some Vaadin Flow component “feature” behavior that makes it very hard and tedious to tweak their appearance!

E.g. a < vaadin-combo-box > contains a <vaadin-text-field id=“input” …> that seems to be immune to changes via the style sheet.
No matter how I write my CSS selector to adjust its top and bottom padding my settings are ignored. :frowning:

According to my CCS book and misc. CSS tutorials on the web at the latest

vaadin-text-field#input { /* should match all elements with tag name "vaadin-text-field" and id="input" */
	padding: 0px; 
}

should definitely match and set the element’s padding to 0px but its not! Inspection in the browser’s webtools reveals: the upper padding is 16px and the lower is 4px! Why are my style sheet changes ignored???

2

Here is a tutorial how to get startted with ComboBox styling

https://vaadin.com/learn/tutorials/vaadin-combo-box-style-howto

The parts inside the ComboBox are in the protected shadow DOM area of the web component, thus standard selectors cannot touch them.

There is compreshensive training package on our website about how the styling works in our framework

https://vaadin.com/learn/training/v14-theming