# Setting flexible grid height just works after resize

cotupha
23 5

I have a grid inside a vlayout inside a div; I add the rows to the grid with Java and use this whole div as the src for an iframe that is big enough for displaying all the components.

The problem is that the grid is too small even when it has plenty of space to grow vertically, so, my rows are displayed with a vertical scroll. The grid has only five rows, but each row can have a text of one, two or three lines, so I cannot give it a fixed height.

Here is the definition of the div-vlayout-grid in my zul file:

<div apply="myDivComposer" hflex="1" vflex="1" align="middle" style="background: transparent;">
<vlayout>
<space height="15px"/>
<image src="/my/logo.jpg" width="740px" height="42px"/>

<grid id="grid" sclass="my-css-class">
<auxheader label="Second column" colspan="2" align="left" />
<columns visible="false" >
<column visible="false" width="0px"/>
<column hflex="1"/>
<column width="180px" align="center"/>
<column width="160px" align="center"/>
</columns>
<rows />
</grid>
<space height="15px"/>
<hlayout >
...footer...
</hlayout>
</vlayout>
</div>


I checked the generated html and css and the problem is that zk is setting a fixed height of 165px in the style of the z-grid-body. I do not know why it calculates that height.

If the grid gets updated at some point (delete and add a new row, for example), then it looks fine, without the scrolls. Or if I resize the window, then the grid looks fine. And some more weird info: if I remove visible="false" from the columns tag, then all the rows are displayed correctly, but I see empty column headers after the auxheaders.

I have been playing with vflex="1" and vflex="min", but the result I do not get the expected result.

How can I make it grow according to the height of the rows and get rid of the scroll?

Thanks!

delete retag edit

Sort by » oldest newest most voted

aznavour
26 3

I experience the same since we have updated from 6.5 to ZK 7.0.2. We have labels that show validation messages in some cells. We expect them to increase the size of the grid.

I have found out, that it relates to the visible="false" of the columns.

http://zkfiddle.org/sample/3uomea8/2-grid-resize-columns-visible-false (Broken example)

http://zkfiddle.org/sample/3uomea8/3-grid-resize-columns-visible-false (Working example)

Strange!

cyiannoulis
1191 10

Sorry guys but i have tested your page with ZK 7.0.2 (FF 29 and Chrome 35) and looks fine to me. Maybe it is not so clear what happens so post a complete sample with a composer.

@aznavour In your fiddle example if you set the window height and the vflex attribute in the grid component your page should be ok:

<zk>
<window border="normal" title="hello" apply="pkg\$.TestComposer" height="100%">

<div>columns visible="false"</div>

<grid vflex="true">
<columns visible="false">
<column width="250px"/>
<column />
</columns>
<rows>
<row>
<cell>
<label value="Firstname" />
</cell>
<cell>
<vlayout>
<label id="msg"></label>
<textbox />
</vlayout>
</cell>
</row>
</rows>
</grid>
<button id="btn" label="Show message" />
</window>
</zk>


In general i would suggest to avoid layout problems, try to set the space that will be allocated by the parent component and then apply vflex/hflex to the child components. Do not apply vflex/hflex directly to the parent components. For example, in the cotupha's page i would do the following:

    <div apply="myDivComposer" hflex="1" vflex="1" align="middle" style="background:transparent;"
height="100%">


and then

<grid id="grid" sclass="my-css-class" vflex="true">


Hope that helps Costas

[hide preview]