Setting width for AppLayout

Flow
1

Hi,

I have extended AppLayout and I have added some items to the Drawer as well as to NavBar. Everything works great.

This is the code:

public class MainLayout extends AppLayout {

private final SecurityService securityService;

public MainLayout(@Autowired SecurityService securityService) {
    this.securityService = securityService;
    SideNav nav = getSideNav();
    addToDrawer(nav);
    navBar();
}

private SideNav getSideNav() {
    SideNav sideNav = new SideNav();
    SideNavItem home = new SideNavItem("Home", "home", Application.Icon.HOME.get());
   [...]

    return sideNav;
}

private void navBar() {
   [...]
    addToNavbar(header);
}

Pretty much like it is in tutorials.
Now, I would like to set the width of the AppLayout to not occupy the whole screen. I would like it to occupy maybe 80% of the screen and the rest of it would be covered by some background-image of <body>.

Is this doable with AppLayout? Or is AppLayout meant to occupy the whole screen? I develop only for desktop browser, I don’t care about mobile.

2

You can wrap the AppLayout in a Div

3

No. This doesn’t seem to work (coincidentally this is also what ChatGPT suggests).
It works only for the content part of the layout but NavBar and Drawer are still totally unaffected.

I can sort of make the NavBar reduce its width by hardcoding some CSS i.e.

width: 80%;
left: 10%

but nothing seems to work for Drawer - it is always sticked to the left side of the screen.

4

this will help you

in your theme add


vaadin-app-layout::part(navbar) {

     position:absolute;
     top:0;
     left:0;

}


@AnonymousAllowed
@Route("test")
public class TestView extends HorizontalLayout {

    public TestView() {
        setSizeFull();
        setPadding(false);

        Div appLayoutWrapper = new Div();
        appLayoutWrapper.getStyle().setDisplay(Style.Display.FLEX)
                .setFlexDirection(Style.FlexDirection.COLUMN)
                .setWidth("80%")
                .setHeight("100%").setPosition(Style.Position.RELATIVE);

        com.vaadin.flow.component.applayout.AppLayout appLayout = new AppLayout();
        appLayout.addToNavbar(new DrawerToggle());
        appLayout.addToNavbar(new Span("Test View"));
        appLayout.addToDrawer(new Span("Drawer Item"));
        appLayoutWrapper.add(appLayout);
        add(appLayoutWrapper);

        Div backgroundWrapper = new Div();
        backgroundWrapper.getStyle().setDisplay(Style.Display.FLEX).setHeight("100%").setWidth("20%")
                .setBackground("red");
        add(backgroundWrapper);
    }

}
5

All you need is some CSS. :slight_smile:

body {
  background: ...;
}

vaadin-app-layout {
  margin-inline: auto;
  max-width: 80%;
  position: relative;
}

vaadin-app-layout::part(drawer),
vaadin-app-layout::part(navbar) {
  position: absolute;
}
6

Thank you @elad2 and @anezthes :)

I used something in between of both your solutions and it works great. I guess CSS is the way to go with latest Vaadin versions :slight_smile:

7

It depends. We try our best not to force CSS upon developers, but depending on the use case, we might not have a corresponding Java API.

Changing the behavior (positioning) of the AppLayout’s drawer and navigation bar is currently not possible through the API. However, as with most things we do, it comes down to user feedback and demand.

EDIT: You can use utility classes and the Java API to style the AppLayout itself.

appLayout.addClassNames(Margin.Horizontal.AUTO, Position.RELATIVE);
appLayout.setMaxWidth(80, Unit.PERCENTAGE);

But as far as I know, there’s no way to access its parts.

8

That’s understandable.

Thank you again for your time.