Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

How can I make a VerticalLayout scrollable?

Jon Inazio Sánchez Martínez
7 years ago Jun 24, 2015 2:09pm

I have a Components which exists as a common layout for all my pages. The layout of this component is as follows (made using paint so please sorry :p):

Right arrows mean that this layout is a HorizontalLayout and down arrows VerticalLayout.

I'm really interested in making bodyContent layout SCROLLABLE. Within this layout I usually introduce lots of UI components (more layouts, text fields, forms, grids...) and sometimes components aren't shown due to the lack of vertical space and the absence of vertical scroll. So is there any way to make bodyContent scrollable (using SCSS/CSS or any other way)?

Thanks in advance.

Marko Grönroos
7 years ago Jun 24, 2015 3:32pm

The basic pattern is to make the bodyContent a Panel (with full size), in which you put the VerticalLayout or whatever. To get vertical scrollbar, the VL must in such case have undefined height; the vertical scrollbar appears when the height of the VL overflows the Panel's content area.

It's also possible to enable scrollling in other components with "overflow: auto" in CSS, as is done here for the Embedded component.

Jon Inazio Sánchez Martínez
7 years ago Jun 25, 2015 7:31am
Anthony Baldarelli
7 years ago Mar 31, 2016 4:02pm
Anthony Baldarelli
7 years ago Mar 31, 2016 4:34pm