-
FEATURED COMPONENTS
First time here? Check out the FAQ!
i am using zk 6.5 and i follow as define (http://books.zkoss.org/wiki/ZKDeveloper%27sReference/UIPatterns/Grid%27sColumnsandHflex) but textbox not getting minimum size as par the content in textbox ex:-
<grid height="99%" hflex="min">
<columns >
<column hflex="min" label="Sel"></column>
<column hflex="min" label="Schd. No."></column><!-- width="120px" -->
<column hflex="min" label="Order/Item No."></column><!-- width="160px" -->
<column hflex="min" label="Seq. No."></column><!-- width="100px" -->
<column hflex="min" label="Grade"></column><!-- width="100px" -->
<column hflex="min" label="Cast No."></column><!-- width="100px" -->
<column hflex="min" label="Heat No."></column><!-- width="100px" -->
<column hflex="min" label="Status"></column><!-- width="100px" -->
</columns>
<rows>
<row style="background:#84BFE5" > <!-- 1 -->
<checkbox hflex="min" style="background:#84BFE5" ></checkbox>
<textbox hflex="min" style="background:#84BFE5" readonly="true" value="HT-CAS1001"></textbox>
<textbox hflex="min" style="background:#84BFE5" readonly="true" value="107090836-10"></textbox>
<textbox hflex="min" style="background:#84BFE5" readonly="true" value="L"></textbox>
<textbox hflex="min" style="background:#84BFE5" readonly="true" value="AS1442"></textbox>
<textbox hflex="min" style="background:#84BFE5" readonly="true" value="C10203"></textbox>
<textbox hflex="min" style="background:#84BFE5" readonly="true" value="21041"></textbox>
<textbox hflex="min" style="background:#84BFE5" readonly="true" value="Complete"></textbox>
</row>
<row > <!-- 2-->
<checkbox hflex="min" ></checkbox>
<textbox hflex="min" readonly="true" value="HT-CAS1001"></textbox>
<textbox hflex="min" readonly="true" value="107090836-10"></textbox>
<textbox hflex="min" readonly="true" value="L+1"></textbox>
<textbox hflex="min" readonly="true" value="AS1442"></textbox>
<textbox hflex="min" readonly="true" value="C10203"></textbox>
<textbox hflex="min" readonly="true" value="21042"></textbox>
<textbox hflex="min" readonly="true" value="Complete"></textbox>
</row>
<row > <!-- 3-->
<checkbox hflex="min" ></checkbox>
<textbox hflex="min" readonly="true" value="HT-CAS1001"></textbox>
<textbox hflex="min" readonly="true" value="107090836-10"></textbox>
<textbox hflex="min" readonly="true" value="L+2"></textbox>
<textbox hflex="min" readonly="true" value="AS1442"></textbox>
<textbox hflex="min" readonly="true" value="C10203"></textbox>
<textbox hflex="min" readonly="true" value="21043"></textbox>
<textbox hflex="min" readonly="true" value="Complete"></textbox>
</row>
<row > <!-- 4-->
<checkbox hflex="min" ></checkbox>
<textbox hflex="min" readonly="true" value="HT-CAS1001"></textbox>
<textbox hflex="min" readonly="true" value="107090836-10"></textbox>
<textbox hflex="min" readonly="true" value="L+3"></textbox>
<textbox hflex="min" readonly="true" value="AS1442"></textbox>
<textbox hflex="min" readonly="true" value="C10204"></textbox>
<textbox hflex="min" readonly="true" value="21044"></textbox>
<textbox hflex="min" readonly="true" value="Complete"></textbox>
</row>
<row > <!-- 5-->
<checkbox hflex="min" ></checkbox>
<textbox hflex="min" readonly="true" value="HT-CAS1001"></textbox>
<textbox hflex="min" readonly="true" value="107090836-10"></textbox>
<textbox hflex="min" readonly="true" value="L+4"></textbox>
<textbox hflex="min" readonly="true" value="AS1442"></textbox>
<textbox hflex="min" readonly="true" value="C10205"></textbox>
<textbox hflex="min" readonly="true" value="21045"></textbox>
<textbox hflex="min" readonly="true" value="Complete"></textbox>
</row>
</rows>
</grid>
Hi,
h/vflex="min" is used to resize a container to the minimum size required to display its children. <textbox> is not a container and has no children so hflex="min" has no effect on it so it will just
set the width to its current width. Not defining an explicit width, a textbox will have a browser specific width (for me it was 127px in chrome, and 133px in IE10). So it will remain at this size.
So to recap, hflex="min" is based on the children size, while hflex="1" is based on the parent's size. Also refer to the ZK Developer Reference - hflex vflex. In your case the hflex="min" makes sense on the columns, to resize them to their longest child's size.
If you use <label>
, instead of <textbox>
, you'll have the effect you wish.
<zk>
<vlayout width="200px">
<textbox hflex="1" value="asdf"/>
<textbox maxlength="100" value="asdf"/>
<textbox hflex="min" value="asdf"/>
<textbox hflex="min" value="asdf"/>
</vlayout>
<grid height="99%" hflex="min">
<columns>
<column hflex="min" label="Sel"></column>
<column hflex="min" label="Schd. No."></column><!-- width="120px" -->
<column hflex="min" label="Order/Item No."></column><!-- width="160px" -->
<column hflex="min" label="Seq. No."></column><!-- width="100px" -->
</columns>
<rows>
<row style="background:#84BFE5"><!-- 1 -->
<checkbox style="background:#84BFE5" />
<!-- 1. use label which has a variable size -->
<label style="background:#84BFE5" value="HT-CAS1001" />
<!-- 2. resize textbox according to column size derived from column label -->
<textbox width="0px" hflex="1" style="background:#84BFE5" value="107090836-10" />
<!-- 3. resize textbox according to column size with an -->
<!-- initial size making the column wider that its column label -->
<!-- in case the column label gets longer the textbox will too -->
<textbox width="70px" hflex="1" style="background:#84BFE5" value="AS1442XYZ" />
</row>
</rows>
</grid>
</zk>
In 2. and 3. the widths of the textboxes align to the column size, and not to their content. So in order to achive the same with textbox (as with label 1.) you would have to calculate the actual size of the textbox before and set it or adjust the size of the textbox with javascript using an approach similar to this.
Robert
Asked: 2013-08-26 10:48:46 +0800
Seen: 89 times
Last updated: Aug 28 '13
composite component help [closed]
EL in a forEach @command not working?
Different template for each grid row
Cardlayout animation is broken
Grid RowRender slow using 6.5.1 and sizable=true
setVisible(false), component will load or not
Decimalbox and doublebox value rounded on iPad
history management with page status
Can you please post a simple code rather than these much of lines
sjoshi ( 2013-08-26 13:28:10 +0800 )edit