Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I added some vboxes within a vlayout. I set the visibility of some vboxes to true and the visibility of other vboxes to false. However, the hidden boxes cause extra white space in my layout. I expect the hidden components to not take up any space in the layout. Please see my code below:
<vlayout style="border: 1px solid #86A4BE;" hflex="1">
<vbox hflex="1">
Box 1
</vbox>
<vbox hflex="1" visible="false">
Box 2
</vbox>
<vbox hflex="1" visible="false">
Box 3
</vbox>
<vbox hflex="1" visible="false">
Box 4
</vbox>
<vbox hflex="1" visible="false">
Box 5
</vbox>
<vbox hflex="1">
Box 6
</vbox>
</vlayout>Thanks,
Sony
I noticed by inspecting the page that some padding is added to each component inside a vlayout. To be specific, the following style is applied for all the inner vboxes. I am not able to override this style.
element.style {
padding-bottom: 0.3em;
}Thanks,
Sony
Hi Richard,
Thanks. Replacing vlayout with a div works fine for my simplified example. However, flexes don't work very well in a more complicated scenario. for e.g., I may add an <include> to add another page which has a bunch of inner components wrapped inside a vlayout. Changing this vlayout to div disturbs the flex.
Rather than trying to replace all vlayouts with a div in my application, I was wondering if there's a way I can override the vlayout style to remove the padding. I tried a number of combinations but I couldn't find a work around. Thank You.
Asked: 2012-03-10 21:00:02 +0800
Seen: 196 times
Last updated: Mar 23 '12
