My title/toolbar is something like:
HorizontalLayout(logo, textField, menuBar1, title, menuBar2)
The title has “flex-grow:1”, so gets all remaining space.
The problem is that the title doesn’t vertically align with the baseline.
I thought maybe I could do it all as one MenuBar.
My title (which is an H1) then vertically aligns, but I’m having trouble expanding it horizontally to take all remaining space.
In the browser I can set “flex-grow: 1” on the vaadin-menu-bar-button, and that seems to give me exactly what I want, but on the server-side I only get the reference to the vaadin-menu-bar-item inside the button.
So, is there a way to get around this, or is expanding title in MenuBar the wrong approach?
setVerticalComponentAlignment(Alignment.BASELINE) did nothing.
setVerticalComponentAlignment(Alignment.CENTER) did what I would expect, and is better than what I had, but is still not what I want.
Can you try horizontalLayout.setAlignItems(Alignment.BASELINE); ?
My previous suggestion probably had the issue that, while the title was now baseline-aligned, all the other components were not. This should apply baseline alignment to all of them. I think this should work.
I’m not entirely sure if I understand you correctly, but I think there is no such thing as “the same baseline” between components. The concept of baseline comes from flexbox. The browser (not vaadin, i think) will identify for each component where the baseline is, and align the components in a way that makes their baseline on the same level. The above link has a nice visualisation of that.
If neither baseline nor center alignment is suitable to your needs, you could always add custom margins to your components to finetune their alignments to your liking.
Looking at your screenshot of the toolbar, I think this is how I would do it. Use Center baseline, then reduce the margin-top of the “Person” title a bit, and it will look okay.
. Well, after overrode the verticalAlignment for the logo to be center again.