I try to make a VerticalLayout scrollable. I followed a other threads on this forum (vaadin 8) and the hint with overflow auto. So, sourcecode say’s more then 1000 words. So here it is:
public class PanelView extends VerticalLayout {
public PanelView() {
VerticalLayout panel = new VerticalLayout();
panel.getStyle().set("overflow", "auto");
panel.getStyle().set("border", "1px solid");
panel.setWidth("300px");
panel.setHeight("200px");
add(panel);
VerticalLayout layout = new VerticalLayout();
layout.setSizeUndefined();
layout.add(new TextField("eins"));
layout.add(new TextField("zwei"));
layout.add(new TextField("drei"));
panel.add(layout);
}
}
with Vaadin 10.0.2
The result is: I see from the Textfield only a few pixel (attachment).
I testet a lot. But no positiv result. Has someone an idea where I am wrong?
I made my own class to make the usage of a scrollabel panel easier than described above. In the end, my class does the same things as described by Diego before.
public class ScrollPanel extends VerticalLayout {
private VerticalLayout content;
public ScrollPanel(){
super();
preparePanel();
}
public ScrollPanel(Component... children){
super();
preparePanel();
this.add(children);
}
private void preparePanel() {
getStyle().set("overflow", "auto");
content = new VerticalLayout();
content.getStyle().set("display", "block");
content.setWidth("100%");
super.add(content);
setHeight("100%");
}
public VerticalLayout getContent(){
return content;
}
@Override
public void add(Component... components){
content.add(components);
}
@Override
public void remove(Component... components){
content.remove(components);
}
@Override
public void removeAll(){
content.removeAll();
}
@Override
public void addComponentAsFirst(Component component) {
content.addComponentAtIndex(0, component);
}
}
This ScollPanel class is just as easy and simple to use as a simple VerticalLayout.
Using the example code given in this thread, the code would look like this
ScrollPanel panel = new ScrollPanel(new TextField("eins"), new TextField("zwei"), new TextField("drei"));
// or
ScrollPanel panel = new ScrollPanel();
panel.add(new TextField("eins"), new TextField("zwei"), new TextField("drei"));
// or
ScrollPanel panel = new ScrollPanel();
panel.add(new TextField("eins"));
panel.add(new TextField("zwei"));
panel.add(new TextField("drei"));
Addendum: my PanelLayout class is for a vertical scroll bar. If you want a horizontal scroll bar, change the line content.setWidth("100%"); to content.setWidth(null); content.setHeight("100%"); and also content should be of Type HorizontalLayout. If you want both scroll bars, use content.setSizeUndefined();
the solution is to change the display property of the layout(VerticalLayout) from flex to block.
Using flex, the container expands items to fill available free space, or shrinks them to prevent overflow.
public class MainView extends VerticalLayout {
public MainView() {
setClassName("main-layout");
VerticalLayout panel = new VerticalLayout();
panel.getStyle().set("overflow", "auto");
panel.getStyle().set("border", "1px solid");
panel.setWidth("300px");
panel.setHeight("200px");
add(panel);
VerticalLayout layout = new VerticalLayout();
layout.getStyle().set("display","block");
layout.setSizeUndefined();
layout.add(new TextField("eins"));
layout.add(new TextField("zwei"));
layout.add(new TextField("drei"));
panel.add(layout);
}
}
Hi Diego,
I got my Horizontal Scroll Bar working thanks to you! However, I have to scroll all the way down to the bottom of the page anytime I want to use it. Which is obviously inconvenient if I’m working at the top of the page. Is there anyway to freeze the scrollbar to force it to always be visible?
