Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-1650

In vlayout, any child component even if has visible="false" occupies space

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 6.5.2
    • 6.5.1, 6.5.2
    • Components

    • JDK 1.6, Tomcat 6.0.35, tested on: IE 8, FF 19, Chrome 25

      It seems that invisible components children of vlayout occupies space even if they should not.
      In the example the same components are enclosed in a vlayout, vbox and div respectively.
      As you can see, in the first case there's a space before the green textbox, caused by the invisible components.

      Here is the example:

      <?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
    <window title="Space occupation case test">
        <separator />
        <label value="Wrong space occupation [vlayout]"/>
        <vlayout style="background-color: orange">
            <textbox visible="false" />
            <label visible="false" />
            <grid visible="false" />
            <label visible="false" />
            <grid visible="false" />
            <label visible="false" />
            <grid visible="false" />

            <textbox value="Text" style="background-color: green"/>
        </vlayout>
        <separator />
        <label value="Correct space occupation [vbox]"/>
        <vbox width="100%" style="background-color: orange">
            <textbox visible="false" />
            <label visible="false" />
            <grid visible="false" />
            <label visible="false" />
            <grid visible="false" />
            <label visible="false" />
            <grid visible="false" />

            <textbox value="Text" style="background-color: green"/>
        </vbox>
        <separator />
        <label value="Correct space occupation [div]"/>
        <div width="100%" style="background-color: orange">
            <textbox visible="false" />
            <label visible="false" />
            <grid visible="false" />
            <label visible="false" />
            <grid visible="false" />
            <label visible="false" />
            <grid visible="false" />

            <textbox value="Text" style="background-color: green"/>
        </div>
    </window>
</zk>

            vincentjian vincentjian
            coleriv coleriv
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: