How to set padding between components on app header?

Hi Guys,

i have logo and H4 text next to each other but i want to set padding more? (now they are almost one on another).

How to do this?
image.png

How is the H4 and logo defined there? If using HorizontalLayout, horizontalLayout.setSpacing(true) might be enough.

thank you let me check this

ok it worked a little

but waht if i want to move H4 next to right side of window?

image.png

or just made bigger spacing

try alignment

ok i tried

private Component createHeaderContent() {
HorizontalLayout layout = new HorizontalLayout();

    // Configure styling for the header
    layout.setId("header");
    layout.getThemeList().set("dark", true);
    layout.setWidthFull();
    layout.setSpacing(true);
    layout.setAlignItems(FlexComponent.Alignment.CENTER);

    // Have the drawer toggle button on the left
 //   layout.add(new DrawerToggle());

    // Placeholder for the title of the current view.
    // The title will be set after navigation.

    // A user icon
    Image image = new Image("images/Logotyp_Dookoła_Pracy_KRZYWE_v2.png","");
    image.setHeight("var(--lumo-size-xl)");
//    layout.add(image);
    viewTitle = new H4(new Anchor("https://www.linkedin.com/in/lukasz-jarych/", "autor narzędzia: Łukasz Jarych"));
 //   layout.add(viewTitle);

    Button logout = new Button("Log out");

    layout.add(new DrawerToggle(), viewTitle, logout);

    return layout;
}

and the result is

image.png

like everything is on the left

not stretching out

for full width

There are some issues with that advice.

Think of HL as a row of elements that all stack up against the left side. You can change the layout’s justification so that they all stack up to the right instead, or to the center. But individual items can’t really move to another part of the layout.

So there’s 3 ways you can do to move something to the opposite end of the row:

  1. You can fill the space to the left of the element with tons of margin with margin-left:auto;
  2. You can make the preceding element take all the available space by setting its width to 100%, which will push the last element to the right end.
  3. You can add a “spacer” element in between, and give that 100% width.

Based on the screenshot, the horizontal layout is not really “full width” although you call layout.setWidthFull(). This happens if the parent component is not full width. Do you have the full source code of the layout?

Love this explanation thank you

message.txt (5.84 KB)

here is a full code