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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How do I make a horizontal scrollbar appear at specific width of a panel or
Hey guys!
I am having the following issue:
I have a panel, to which I added a gridlayout (3 columns, number of rows grows dynamically).
The panel is at the top of the component hierarchy, i.e., it sits in the browser window.
My goal is to have a horizontal scrollbar appear at a specific width. Before the panel/browser window hits that width, the gridlayoutslots shrink together. I managed to that by setting the min-width: 900px; property for my style of the panel in my .scss-file (mytheme). I also added overflow-x: auto; to that style, however when I shrink the browser window to that specific size and further, the content gets cut off, but no horizontal scrollbar appears. I bet someone already has had similar problems.
I actually solved the problem doing the following:
.v-generated-body{
min-width: 900px; //just a random number
overflow-x: auto;
}
The thing is I want the min-width in percentage instead of pixels, how that doesn't really work.
Does anybody have an idea?
Thanks in advance!
Paul
Hey Paul,
You shouldn't have to style the generated body. You can try this:
final CssLayout content = new CssLayout();
content.addStyleName("my-layout");
content.setSizeFull();
GridLayout grid = new GridLayout(3, 3);
grid.addStyleName("my-grid");
grid.setSizeFull();
for (int i = 0; i < grid.getColumns() * grid.getRows(); i++) {
grid.addComponent(new Label(String.valueOf(i)));
}
content.addComponent(grid);
setContent(content);
SCSS
.my-layout {
overflow: auto;
}
.my-grid {
min-width: 900px;
}
Re: percentage min-width. Percentage of what?