Heght mode of grid i am using is HeightMode.ROW. Every time page with grid is opened grid is initialized with fixed height (12 rows or number of elements in case of this very number is lower then 12).
But different users have diffirent display sizes and that’s the problem. Someone can see whole grid, but someone can’t, so it’s forced to scroll the page.
Is there any possibility to initialize grid with auto calculated height according to display heigth?
And one additional question.
Is it possible to make grid resized when user changes browser window size?
Hello, I’m new to the forum, and I’m not quite sure this response belongs here, because it sounds like Andrey is talking about your Java implementation, and I am having a similar issue with the Polymer component.
My issue is this: if you set height: auto or height: on the grid, the table expands to fit its container, but depends on the overflow behavior of the container to take care of vertical scrolling. This is sub-optimal in that the column headers then slide below the upper border with the rest of the table; it also means that unless you have a swipe-enabled device, you need to scroll down to the bottom of the container in order to see the horizontal scrollbar on the table.
On the other hand, if you do not set the height of the grid, you get nice scrolling behavior, but as Andrey states, no matter how much real estate there is for its parent, the table is limited to about 10 rows plus headers.
I may very well not understand what needs to be done to get it, but the behavior I am seeking is to fill up the parent container while maintaining its own vertical and horizontal scrolling such that the headers remain fixed at the top.
I have attached a sample to show a projected use of vaadin-grid in the project I am working on. Drop it into the bower-components directory of your Polymer installation and run polyserve to see it.
The actual component example is also attached separately.
Any help here would be greatly appreciated. (I am a seasoned Java developer but have only been working with Polymer for about eight weeks now).
Thanks!
Al
33910.tgz (4.55 KB)
33911.html (10.9 KB)
You can resize the grid to fill the viewport with CSS, just the same way as with any other block element on the page. The simpliest way is to assign height using viewport height units:
vaadin-grid {
height: 100vh;
}
The downside of this approach: it does not easily mix with toolbars and other content on the same page.
Alternatively, you can use flex layout to make the grid take avaiable viewport height, preserving space for toolbars and other page content. See this JSbin for an example:
http://jsbin.com/lewefudisa/edit?html,output