Horizontal Layout height to fit the content it has

Hi all, I have a view that extends VerticalLayout. Inside this VerticalLayout, I have a HorizontalLayout that is going to act at my navigation bar, and a VerticalLayout that is going to act as the main content area. I have added a H1 text to the HorizontalLayout (navigation bar), but the space that the layout occupies is currently way too big, exactly half the screen. How do I set the height of the HorizontalLayout so that it matches the content inside. I’ve attached a screenshot.

As well as this, the H1 text does not follow the HorizontalLayout if I were to move it around. For example, if I place the HorizontalLayout at the bottom rather than the top, the H1 text that has been added to the HorizontalLayout will still be at the top. Is there a way to “link” the two to prevent this happening, or do I have to manually move the H1 text component? I’ve attached another screenshot for this.


Might be worth noting that my VerticalLayout that contains the main content of the page is currently say to setHeightFull() so that the background image fills the screen. Because of this, I also have the HorizontalLayout set to setSizeFull() so that it is actually visible. I know this is causing the 50/50 split view I have going on right now, but I don’t know how to get around this

My current code for the view in question: https://pastebin.com/u0wWqnyN

Each of the Layouts added to your MainLayout occupy 50% of the available height, you have to configure they ratio like e.g. using flex or expanding

I’ll have a look into that, thanks!

Is there a way to set a margin on an individual component with Java, or do you have to do it with CSS?

I’ve noticed you can do it on a layout, but I wasn’t sure if you can also do it on a component

You can use the Lumo utility classes to apply class names to any component