How do I make a horizontal scrollbar appear at specific width of a panel or

Flow
1

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

2

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?