I didn’t find a way to integrate a scroll bar in a grid layout. I checked the API and I didn’t find anything. did someone already do it?
Layouts don’t support scrolling by themselves, you need to wrap your component with a Panel. You can use the light style (Panel.STYLE_LIGHT), then the panel will be completely transparent.
Thanks for the reply. I have used a panel instead of a grid layout.
This isn’t working for me and I’m sure it’s user error. I have a very complicated layout to satisfy user requirements which basically need a complex form in a “table” arrangement where the column headers and row headers are always visible, so that the “inside” only scrolls. There is also a fixed row of totals at the bottom that are always visible.
In my stupid little simple illustration below, A-E and TA-TE are always visible though will need to scroll synchronized with the corresponding grid cells as it will be too large to fit on most screens. Also, the rows of the grid will scroll vertically and keep the row headers synchronized to the grid rows. It sounds more confusing than it really is to the user, but it is a bear to layout. We have this layout working in Flex but are in the process of converting to Vaadin. I was trying to follow the same format of nested layouts with an inner Panel for the scrolling, but have not been successful in getting scroll bars to show up at all.
A B C D E ...
1
2
3
4 <this is the scrolling area that should have bars and also keep the col/row hdrs sync’d>
5
…
TA TB TC TD TE …
So basically, can a simple example be provided that shows a “scrolling” GridLayout using the Panel “trick”? Or is there a much better way to lay this out in Vaadin that I’m missing?
Hi, Brad!
I’m thinking that this could be the common “sizing” gotcha in Vaadin. If your layout inside the panel is 100% high and wide, it’ll clip the content instead of producing scrollbars.
Make sure that the panel either has a fixed size (in pixels or percent), e.g. panel.setSizeFull() would be what you want if I understood your layout explanation correctly. When the panel is OK, you need to specify that the layout inside the panel is of undefined height and 100% wide, which will make it occupy all available space vertically and as much space as needed horizontally. Layout.setHeight(null) and setWidth(“100%”) should do the trick.
HTH,
/Jonatan
Did you mean 100% height and undefined width? (to get horizontal scrollbar, but no vertical one)
Of course - if you want to get both scrollbars and the content size can not be set in pixels, one should use setSizeUndefined().
Jonatan,
The panel was already at setSizeFull, however, the GridLayout inside was also at 100%. I changed it to setSizeUndefined() and voila! It mostly worked. Thanks!
I say mostly because if the GridLayout was smaller than the Panel on a very large screen, the “leftover” space did not get the background color. I figured this out and solved that issue by using setExpandRatio on the Panel and the HorizontalLayout containing it. (I had failed to mention in rereading my initial post that the Panel is contained within a HorizontalLayout itself and all this is within a VerticalLayout component.) Lots of nesting going on but so far it appears to look and behave as desired and not too slow. I just need to get the scrolling synchronization completed then test it on various platforms and browsers.
EDIT: Corrected and embellished solution description in paragraph above.
I was searching through the forums some more trying to figure out how to synchronize the scrolling position of the panel with the “row and column headers” of my layout, which are actually separate components. Anyway it made me wonder if there was a better way to accomplish the layout in Vaadin, ie. with a Table?
So, my question now is: Can a Table’s contents be manually added cell-by-cell and can it contain components such as Labels and ComboBoxes? Will or can a Table’s column and row headers always be visible if the table is too large for the screen area and do they both scroll “with” the content cells?
This is basically all I want but as Flex didn’t have this capability, I did my own with nested GridLayouts and have now begun the same work with Vaadin. I didn’t stop to think if it was necessary or already handled.
Auch, that’s a bug I’ve probably caused with overly clever CSS. In which direction did you get the empty space without background color, on the right side or on the bottom side of the layout? Can you post a screenshot of it and maybe I can reproduce it.
Here it is first without the 2 expandSetRatio calls showing the issue, then fixed with the calls. (Mind you, the finished product is much more involved and will look much more polished.)
The content of my grid is showing outside the grid’s scroll bars.
