Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello,
Could someone please explain to me how the heights and widths properties work (e.g. the percentages) , what are the rules that apply when I want to set these properties in components contained in other components?
For example if I set a "100%" height on a component this means that it will be "100%" of the parent component height, when the parent height could be "30%" of its parent? I have some problems on the "height" property when using portal layouts, the "width" works ok so I can fill the screen on the width but I cannot do the same on the height.
Thank you,
Hallo Bogdan,
as one of the old developer guides puts it
You can specify the width for each cell of hbox with the widths property as follows.<hbox width="100%" widths="10%,20%,30%,40%"><label value="10%"/><label value="20%"/><label value="30%"/><label value="40%"/></hbox>
The value is a list of widths separated by comma. If any value is missed, no width is generated for the corresponding cell and the real width is up to the browser.
In other words, you specify widths or heights in a parent component in order not to have to set them up in every child; it does not make much sense to specify a certain components width or height via both a 'width' or 'height' attribute and 'widths' or 'heights' on its parent; anyway, and to the best of my knowledge, the latter will supercede the former (i.e., 'widths' and 'heights' rule over any width or height specified on the children).
As for your problem with height=100% I have not succeeded in making it work but in very simple forms, as long as every ancestor displays height=100% as well, and only if there are not "complicated" components involved, such as tabboxes, but perhaps somebody will be able to tell you better.
With kind regards
César Varona
Hello,
Thank you for your answer. One thing is still not clear for me, the child height and width values refer to the "space" available in the container where they are located in, or to the whole "space" dedicated to the page... probably I didn't write this right, but I hope I make some sense.
And yes, in my case I have a window with a tabbox that holds a portallayout with panels inside. The problem is on these panels. What I did so far was to use "px" values instead of "%" and it works, but I'm not satisfied this way.
Best regards,
Hallo Bogdan,
just try
<window title="My First Window" border="normal" width="100%">
<hbox width="100%" widths="10%,20%,30%,40%">
<label value="10%" style="background-color: red;"/><label value="20%" style="background-color: orange;"/><label value="30%" style="background-color: green;"/><label value="40%" style="background-color: yellow;"/>
</hbox>
<hbox width="50%" widths="10%,20%,30%,40%">
<label value="10%" style="background-color: red;"/><label value="20%" style="background-color: orange;"/><label value="30%" style="background-color: green;"/><label value="40%" style="background-color: yellow;"/>
</hbox>
</window>Best regards
Asked: 2009-03-02 07:20:14 +0800
Seen: 177 times
Last updated: Mar 02 '09