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?