Label of ColorPicker inside FormLayout

Good day, dear colleagues

I have 3 TextFields and 1 ColorPicker in the FormLayout. Could you tell me how do I can set label of ColorPicker from the left side like TextFields, but not inside ColorPicker button? Why native Vaadin’s components are not friends with each other and everything looks crooked when you are competing it with each other? Why Vaadin’s components are not typical and do not see each other’s borders?


one option would be to create a new custom field that incorporates a Label and the ColorPicker. Another option would be to use a different Layout than FormLayout, for example GridLayout.


Thank you, Olli

I used first variant with custom component


Second variant make form looks ugly. The color picker do not stay exactly in proper position and float during adjustment,
but I could not get smooth results.

So why it’s happen like this? Why standard native components of Vaadin are not friends with each other?


Just a guess, but probably mostly due to legacy reasons - some mistakes may have been made in the past, but people expect continuity between versions (so that their apps don’t suddenly break on upgrade). Fixing components that already “work” to behave slightly differently is not usually done lightly.


Thank you.