Automatic Vertical Height for NG Grid?

Questions
1

Is there a way of making the Vertical Height for an NG Grid automatic?

I found this blurb in the wiki,

Grid Height in Responsive Form

It can be used both in responsive forms and absolute forms. If used in responsive mode, its ‘responsiveHeight’ property must be set in Properties View (which is the fixed height it will occupy).

Adding a table in a flex-content layout and setting the table responsiveHeight property to 0, let the table grow up to 100% height of parent element (see more on flex-layout here). Used with other containers than flex-content layout in order to grow the table to 100% height, the parent element must have a known height.

However, whenever I put the responsiveHeight of an NG Grid to 0, the grid just disappears, it doesn’t automatically resize.

Looking back at that description though, it links to here,

Flexbox Layout and Table Components

When a Servoy Table Component from the Bootstrap components package or from the Servoy Extra package or from the Servoy NG Grids package is placed within the content section of the flexbox layout as direct child, the table height will use 100% of the available height if the responsiveHeight property is set to 0.

NOTE for the Table component from the Servoy Extra package the property responsiveDynamicHeight, should be set to false if you wish to use all the available height of the content section; if the responsiveDynamicHeight is set to true the Table will have a max-height equal to the design responsiveHeight property of the Table; the max-height may be smaller than the available height resulting in unused space.

If instead you prefer to use the design height of the Table component, wrap the Table component within a different 12Grid container. However letting the table use a different height than the available height in the content section may result in bad UX for the User since may result in double vertical scrollbars.

So, this responsiveHeight aspect is related to this Table Component… wait is this talking about the table element or the ng grid?

Is there any way of turning on this ‘responsiveDynamicHeight’ for the NG Grid, or is it only for the Table elements?

2

Hi John,

AFAIK the only grid that supports responsive height is the Servoy Extra Table.

Hope this helps narrowing your possibilities

3

Hi

Using a 12-er grid, how do I define a row with a datagrid to use the available space?

In the Servoy documentation I read, that responsiveHeight set to 0 will dynamicly grow the grids height (as mentioned in the former post). But it disappears.

Thanks and regards

4

Hi,

using a responsive form, if you set the responsiveHeight to 0 will indeed take all available height of the parent container. Note however a simple row or simple column have height = auto, if you just drop a grid in it will result to 0.
You need to make sure that the containers above the grid are able to fill the height ( e.g. add a styleClass to set their height:100% ).

You can look on how to use the FlexLayout rather than row-col to achieve what you need: see this wiki https://github.com/Servoy/12grid/wiki/Flexbox-Layout

Hope this helps, regards,
Paolo

1 Like
5

Thank you, Paolo, I’ll give it a try.

Best regards
Birgit

6

Hi Paolo

That did it! Thank you. It took me some time to identify the surrounding containers. And the solution with the FlexLayout was even better.

Best regards
Birgit