Question

The problem:
A text box has a shorter length than a combobox. so if I draw them vertically it does not look pretty because they are not aligned on their right side edges. so let’s make text box a little longer.
But I do not want to just type pixels to do it. I think I should be able to do this with setting percentages on some DIVS but I am newbie and could not figure out yet.
so here is what I have and I am also attaching it as a sreen shot.
so for now our goal is to make that “Alias” text box make larger so it will be right aligned with the “Ancestry” combobox that is below it.

P.S: some of these tags you see are not standard html. they are from ZK framework but it is fine. we can still use DIV.

<vlayout >
    <hlayout spacing = "20px">
        <vlayout id= "GeneGroup">
            <label id= "geneLabel" value = "*Gene Symbol"/>
            <bandbox id="bdGeneSearch">
            </bandbox>
        </vlayout>
        <vlayout id= "AliasGroup" >     
            <label id= "lblAlias" value = "Alias"/>
            <textbox  id = "txtAlias">
        </textbox>
        </vlayout>
    </hlayout>

    <hlayout spacing = "20px">          
        <vlayout id= "RefSeqGroup">     
            <label id= "lblRefSeq" value = "*Reference Sequence"/>      
                <combobox id = "cbRefSeq">
            </combobox>         
        </vlayout>
        <vlayout id= "AncestryGroup">       
            <label id= "lblAncestry" value = "Ancestry"/>       
                <combobox id = "cbAncestry">
            </combobox>         
        </vlayout>
    </hlayout>  
</vlayout>
</div>

Answer 1

I changed your layout structure a bit by having single hlayout containing two vlayouts and then using hflex=”1″ on the text box so that it expands to the whole width of vlayout containing it. Here is the code

<zk>
<hlayout>
  <vlayout>
        <label id= "geneLabel" value = "*Gene Symbol"/>
        <bandbox id="bdGeneSearch">
        </bandbox>
        <label id= "lblRefSeq" value = "*Reference Sequence"/>      
         <combobox id = "cbRefSeq">
        </combobox>         
 </vlayout>
 <vlayout>

       <label id= "lblAlias" value = "Alias"/>
        <textbox  id = "txtAlias" hflex="1">
    </textbox>
        <label id= "lblAncestry" value = "Ancestry"/>       
            <combobox id = "cbAncestry">
        </combobox>         
</vlayout>
</hlayout>
</zk>

You can see it in action on ZKfiddle here
Also you can refer to ZK’s excellent documentation on Component flexibility using hflex and vflex here