0

hflex="min" problem in textbox

asked 2013-08-26 10:48:46 +0800

mujawarv gravatar image mujawarv flag of India
45 4

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>
delete flag offensive retag edit

Comments

Can you please post a simple code rather than these much of lines

sjoshi ( 2013-08-26 13:28:10 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted
1

answered 2013-08-27 04:12:28 +0800

cor3000 gravatar image cor3000
6280 2 7

updated 2013-08-28 09:48:04 +0800

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

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: 2013-08-26 10:48:46 +0800

Seen: 89 times

Last updated: Aug 28 '13

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