When the datetime picker field does not have a label the two boxes for the time and the date are misaligned.
There was a topic already opened for this problem but with the current version of vaadin I am using (24.8.7) the solution isn’t working anymore. Label on Top in auto responsive Form layout - Vaadin Forum
Does anyone have any suggestions for a fix ?
That other topic was about alignment between different fields, whereas this is about alignment within the same field component. The workaround in the previous thread is no longer relevant for either case as the bug in FormLayout has been fixed.
As for this particular issue, I cannot reproduce it. I see you have some custom styling applied. Could you try disabling that first to ensure it’s not the cause?
You’re absolutely right. I looked at my style file and found this :
vaadin-date-picker{ padding-top: 0; }
When removed the datetime field is aligned, but I cannot leave it like this since I have a requirement to remove as much padding and margin as possible. So I tried also adding this vaadin-time-picker{ padding-top: 0; } and it worked.