Using MenuBar for main title/toolbar?

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?

have you tried horizontalLayout.setVerticalComponentAlignment(Alignment.BASELINE, title); ?

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.

How does vaadin make sure the text in the input field has the same baseline as the buttons outside?

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.

1 Like

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.

That’s the one! Now it worked :grinning:. Well, after overrode the verticalAlignment for the logo to be center again.

But, it is strange that this was the apparent behavior of the vaadin elements all the time.

vaadin-text-field has a ::before element that helps it align horizontally with components like vaadin-button.

If you change the ::before element’s font size they won’t line up any more. Same thing if you change the button’s font size.

It’s a bit clearer when they’re right next to one another like in the input group examples here:


FWIW, you can use utility classes for that as well.

addClassName(LumoUtility.Flex.GROW) (which equates to flex-grow).