0

Setting flexible grid height just works after resize

asked 2014-04-23 01:06:06 +0800

cotupha gravatar image cotupha
23 5

updated 2014-04-24 02:37:14 +0800

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">
            <auxhead>
                <auxheader label="First column" colspan="2" align="left"/>
                <auxheader label="Second column" colspan="2" align="left" />
            </auxhead>
            <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 flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2014-07-15 15:26:52 +0800

aznavour gravatar image 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!

link publish delete flag offensive edit
0

answered 2014-07-16 16:24:36 +0800

cyiannoulis gravatar image 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

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2014-04-23 01:06:06 +0800

Seen: 153 times

Last updated: Jul 16 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More