JarekToro
Zero Grid Height
Hi there, I'm trying to use a Grid inside a ResponsiveColumn. I think the trouble I meet is about the Grid's Height. In order to force the Grid Height calculation, I've put the Grid inside a Panel container; but it doesn't work because the Grid doesn't display or better it seems to have a 0px Height.
grid.setDataProvider(new GridDataProvider());
grid.addColumn(Row::getCode);
grid.addColumn(Row::getDescription);
grid.getColumns().get(0).setCaption("Code");
grid.getColumns().get(0).setSortable(false);
grid.getColumns().get(1).setCaption("Description");
grid.getColumns().get(1).setSortable(false);
grid.setSizeFull();
Panel panel = new Panel();
panel.setSizeFull();
panel.setContent(grid);
ResponsiveLayout responsiveLayout = new ResponsiveLayout(ResponsiveLayout.ContainerType.FLUID).withFullSize();
ResponsiveRow rootResponsiveRow = responsiveLayout.addRow();
rootResponsiveRow.setSizeFull();
ResponsiveColumn column = rootResponsiveRow.addColumn().withComponent(panel);
column.setSizeFull();
setContent(responsiveLayout);
Diving in the JavaScript at runtime I've found a DIV (yellow circled) having the class v-grid-tablewrapper with height: 0px; furthermore I noticed an upper DIV (blue coloured) having col-container class with only width: 100% attribute and not Height attribute.
After some trials it seems all working good when at runtime I manually add the height: 100% attribute and after a browser resize.
... but I'm not sure this is the right way toward my goal.
Every hint or even a workaround will be appreciate.
Thanks in advance.
You can give a height to the responsiveColumn. It just can’t be a percentage height. Then give the grid a 100% height.
Sent from my iPhone
On Mar 7, 2018, at 6:07 AM, BarneyIt [email protected] wrote:
Hi there, I'm trying to use a Grid inside a ResponsiveColumn. I think the trouble I meet is about the Grid's Height. In order to force the Grid Height calculation, I've put the Grid inside a Panel container; but it doesn't work because the Grid doesn't display or better it seems to have a 0px Height.
grid.setDataProvider(new GridDataProvider()); grid.addColumn(Row::getCode); grid.addColumn(Row::getDescription); grid.getColumns().get(0).setCaption("Code"); grid.getColumns().get(0).setSortable(false); grid.getColumns().get(1).setCaption("Description"); grid.getColumns().get(1).setSortable(false); grid.setSizeFull(); Panel panel = new Panel(); panel.setSizeFull(); panel.setContent(grid); ResponsiveLayout responsiveLayout = new ResponsiveLayout(ResponsiveLayout.ContainerType.FLUID).withFullSize(); ResponsiveRow rootResponsiveRow = responsiveLayout.addRow(); rootResponsiveRow.setSizeFull(); ResponsiveColumn column = rootResponsiveRow.addColumn().withComponent(panel); column.setSizeFull(); setContent(responsiveLayout); Diving in the JavaScript at runtime I've found a DIV (yellow circled) having the class v-grid-tablewrapper with height: 0px; furthermore I noticed an upper DIV (blue coloured) having col-container class with only width: 100% attribute and not Height attribute. After some trials it seems all working good when at runtime I manually add the height: 100% attribute and after a browser resize. ... but I'm not sure this is the right way toward my goal. Every hint or even a workaround will be appreciate. Thanks in advance.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.
Ok, first thanks a lot for your quick reply. Maybe I was not clear enough. In a more complicated RelativeLayout architecture, my goal is to get an automatic resize of the grid to completely fill its parent, and then the parent with its anchestor and so on. In practice what I want to get look like the behaviour of this:
public class MyUI extends UI {
protected void init(VaadinRequest vaadinRequest) {
....
grid.setSizeFull();
Panel panel = new Panel();
panel.setSizeFull();
panel.setContent(grid);
setContent(panel);
}
....
}
In this example I have no need to tell any fixed height to those components and in fact the grid (and its panel parent) get an automatic resize to the full available browser size. Any hint to get what I want ? Thanks again in advance
With css. Everything can’t be relative. One of the items up the chain has to have a real no percentage size.
See this: https://stackoverflow.com/questions/7049875/height-100-not-working
Sent from my iPhone
On Mar 8, 2018, at 12:52 AM, BarneyIt [email protected] wrote:
Ok, first thanks a lot for your quick reply. Maybe I was not clear enough. In a more complicated RelativeLayout architecture, my goal is to get an automatic resize of the grid to completely fill its parent, and then the parent with its anchestor and so on. In practice what I want to get look like the behaviour of this:
public class MyUI extends UI {
protected void init(VaadinRequest vaadinRequest) { .... grid.setSizeFull(); Panel panel = new Panel(); panel.setSizeFull(); panel.setContent(grid); setContent(panel); } ....
}In this example I have no need to tell any fixed height to those components and in fact the grid (and its panel parent) get an automatic resize to the full available browser size. Any hint to get what I want ? Thanks again in advance
— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.