Valo no scrollbar for inner VerticalLayout

Flow
1

Hello,

in the valo theme there is no scrollbar for the inner VerticalLayout. If you change the Theme to reindeer, you will see a scrollbar for the layout. Is this a valo bug?

Thanks :slight_smile:

@PreserveOnRefresh
@Theme(ValoTheme.THEME_NAME)
// @Theme(Reindeer.THEME_NAME)
public class VaadinMainUI extends UI {

private static final long serialVersionUID = 1L;

@Override
protected void init(VaadinRequest request) {
getPage().setTitle("Test Vaadin Valo");
VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.setSizeFull();
verticalLayout.setMargin(true);
verticalLayout.setSpacing(true);

VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
layout.setSpacing(true);
for (int i = 0; i < 20; i++) {
layout.addComponent(new TextField("" + i));
}

verticalLayout.addComponent(layout);
setContent(verticalLayout);
setResizeLazy(true);
setPollInterval(1000);
}

@Override
protected void refresh(VaadinRequest request) {
}
}
2

in the init() method, you could add a conditinal statment to check if the selected theme is reindeer then

verticalLayout.setScrollable(false);
3

I want the scroll effect and i find no methode VerticalLayout#setScrollable

4

I’m sorry the scrollable method works for Panels not VerticalLayouts.
I tried changing the Valo Demo code to reindeer but it didn’t look good at all. Could you upload a screenshot?

Another approach would be to do it through your styles sheet.
add a style name to your layout

verticallayout.addStyleName("scrollpanel"); then your scss style sheet

.scrollpanel
{
    overflow: scroll;
}
5

Sure. The reeinder works perfectly (see reindeer_scrollbar.png). There is a scrollbar and you can see all components.
The valo has no scrollbar (valo_no_scrollbar.png)
16531.png
16532.png

6

try setting the VerticalLayout layout to full size?

VerticalLayout layout = new VerticalLayout();
layout.setSizeFull();
layout.setMargin(true);
layout.setSpacing(true);
for (int i = 0; i < 20; i++) {
layout.addComponent(new TextField("" + i));

if that didn’t wok use a Panel instead of a VerticalLayout for the components, since you’re using Vaadin 7 it will automatically be scrollable.

7

Doesn’t work. Yes but in reeinder it’s scrollable too, just valo has this problem…

8

then I would go with the styles sheet approach

9

Then i will use a Panel ;), but that’s the different between this two Themes…

10

check out this article too! it’s pretty helpful

Optimizng Sluggish UI

11

For me, this sounds like a bug in the valo theme. Of course one can handle the scrolling manually but the layout should handle this the same way than the panel (like it was working before in the reindeer theme).
Maybe open a ticket?

12

Hi everyone. I commented on the related ticket, but I’ll copy the same answer here.

The layouts work as specified in this situation. The root layout is 100% x 100% size, so any overflowing content inside the layout will not cause scrollbars.

The behavior was different in older themes (and not according to the layout specification), allowing this kind of “unspecified behavior”.

The behavior has changed because of the new approach in dealing with unwanted scrollbars in Internet Explorer. The line which affects the behavior is​
https://github.com/vaadin/vaadin/blob/master/WebContent/VAADIN/themes/valo/shared/_global.scss#L111

If you wish to restore the erroneous old behavior, you can add the following in your theme. Note that this only affects the root layout of a UI, not layouts contained inside Panels or other scrollable elements.

.v-ui > .v-widget {
  overflow: visible;
}

The correct solution is of course to set the height of the root layout to undefined/auto to allow the content to grow naturally and let the UI element provide the scrollbar.