Делая вертикально выровненный контроль для всех, имеют одинаковую длину - PullRequest
Новая
       6

Делая вертикально выровненный контроль для всех, имеют одинаковую длину

1 голос
/ 21 июня 2011

Проблема: длина текстового поля меньше, чем у выпадающего списка.поэтому, если я рисую их вертикально, это не выглядит красиво, потому что они не выровнены по правым краям.поэтому давайте сделаем текстовое поле немного длиннее.Но я не хочу просто печатать пиксели, чтобы сделать это.Я думаю, что я должен быть в состоянии сделать это с установкой процентов на некоторых DIVS, но я новичок и пока не могу понять.так вот, что я имею, и я также прикрепляю это как скрин-шот.поэтому сейчас наша цель - увеличить текстовое поле «Псевдоним», чтобы оно было выровнено по правому краю с выпадающим списком «Родословная», который находится под ним.

PS: некоторые из этих тегов, которые вы видите, не являются стандартнымиHTML.они из ZK Framework, но это нормально.мы все еще можем использовать 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>

enter image description here

1 Ответ

2 голосов
/ 23 июня 2011

Я немного изменил структуру вашего макета, добавив один hlayout, содержащий два vlayout, а затем используя hflex = "1" в текстовом поле, чтобы он расширялся до всей ширины vlayout, содержащей его. Вот код 

<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>

Вы можете увидеть это в действии на ZKfiddle здесь Также вы можете обратиться к превосходной документации ZK по гибкости компонентов, используя hflex и vflex здесь

...