CODEWITHSUNDEEP
vaadinvaadin-flowvaadin21
Florian
Florian

Reputation: 120

Scrolling issue on Vaadin 21 and ApplicationLayout

I have a strange problem with the application layout and views which need to be scrolled:

If I create an application with the default App Layout, the drawer toggle is on the top and I add a VerticalLayout with fullsize as view everything is working as expected. But if the vertical content exceeded the height of the browser window (even if I put this content into a scroller), the whole view get scrolled and disappears behind the toggle until the height of the toggle is reached, than scrolling stops. It seams that setHeight(100, Unit.Percentage) does not considers the height of the toggle.

Has someone a similiar problem?

Edit

Put the following code as a view into an AppLayout and open this on your mobile device e.g. iPhone and you will see the vertical scroller:

@Route(value = "application/test", layout = ApplicationLayout.class)
@PageTitle("Test")
@RolesAllowed({"ROLE_NEWSLETTER_ADMIN", "ROLE_ORGANIZATION_ADMIN"})
public class TestView extends VerticalLayout implements BeforeEnterObserver {

    private MenuBar menu;
    private Grid<Person> grid;
    private Label footerLabel;

    public TestView() {
        this.setSizeFull();

        menu = new MenuBar();
        menu.addItem("New");
        menu.addItem("Edit");
        menu.addItem("Delete");
        this.add(menu);

        grid = new Grid<>(Person.class);
        this.add(grid);
        this.expand(grid);
        
        footerLabel = new Label("Number of objetcs: #");
        this.add(footerLabel);
    }

    @Override
    public void beforeEnter(BeforeEnterEvent beforeEnterEvent) {

    }
}

AppLayout:

public class ApplicationLayout extends AppLayout implements AfterNavigationObserver {

    private ApplicationService applicationService;
    private H1 headerTitle;

    public ApplicationLayout(ApplicationService applicationService) {
        this.applicationService = applicationService;

        createHeader();
        createDrawer();

        this.setPrimarySection(Section.DRAWER);
    }

    private void createHeader() {
        // Define the header
        HorizontalLayout header = new Header(new H1("Header"));
        addToNavbar(header);
    }
    
    private void createDrawer() {
        ....
    }
}

Upvotes: 4

Views: 625

Answers (1)

Tatu Lund
Tatu Lund

Reputation: 10643

It seams that setHeight(100, Unit.Percentage) does not considers the height of the toggle.

Correct. The 100% is the size of the view port. So if you have e.g. the following

VerticalLayout vLayout = new VerticalLayout();
Button button = new Button();
button.setHeight(50, Unit.Pixels);
HorizontalLayout hLayout = new HorizontalLayout();
hLayout.setHeight(100, Unit.Percentage);
vLayout.add(button,hLayout);

This will produce something where vLayout height is more that viewport height and scroll bar emerges. Instead you should do.

VerticalLayout vLayout = new VerticalLayout();
Button button = new Button();
button.setHeight(50, Unit.Pixels);
HorizontalLayout hLayout = new HorizontalLayout();
hLayout.setHeight(200, Unit.Pixels);
vLayout.add(button,hLayout);
vLayout.expand(hLayout); // or vLayout.setFlexGrow(1.0d, hLayout);

Upvotes: 0

Related Questions