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
@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) {
}
}
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
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)
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?
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”.
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.