Why width can be given in px , why not in % ? what is difference.

asked 2010-08-02 01:18:05 +0800

drajasuman
342 ● 1

go through the example below...Why width can be given in px , why not in % ? what is difference.

<grid fixedLayout="true">
<columns>
<column label="Type" width="150px" />
<column label="Content" />
</columns>
<rows>
<row>
<label value="UserName" width="150px" />
<textbox value="Jerry" width="150px" />
</row>
<row>
Password
<textbox type="password" value="123456789" width="150px" />
</row>
<row>
Re-type Password
<textbox type="password" value="123456789" width="150px" />
</row>
<row>
Age:
<intbox value="19" constraint="no negative,no zero"
width="150px" />
</row>
<row>
Phone:
<intbox constraint="no negative,no zero" width="150px"
value="12345678" />
</row>
<row>
Weight:
<decimalbox format="###.##" value="154.32" width="150px" />
</row>
<row>
Birthday:
<hbox>
<datebox id="db" width="150px" />
<listbox
onSelect="db.setFormat(self.selectedItem.value)" mold="select"
rows="1">
<listitem label="Default" value="" />
<listitem label="yyyy/MM/dd hh:mm a" value="yyyy/MM/dd hh:mm a" />
<listitem label="yyyy/MM/dd" value="yyyy/MM/dd" />
<listitem label="MM-dd-yy" value="MM-dd-yy" />
</listbox>
</hbox>
</row>
<row>
Address
<vbox>
<textbox width="250px"
value="123 W. 45 Street, New York, NY 10001" />
<hbox>
<label value="Zip code :" />
<intbox constraint="no negative,no zero"
width="150px" />
</hbox>
</vbox>
</row>
<row>
E-mail:
<textbox width="150px" value="[email protected]"
constraint="/.+@.+\.+/: Please enter an e-mail address" />
</row>
<row>
Introduction:
<hbox>
<textbox id="intro" rows="3" width="250px">
<attribute name="value">I think ZK is the best! </attribute>
</textbox>
<vbox>
More line :
<spinner value="3" constraint="no negative,no zero"
onChanging="if (event.value.length() > 0 && Integer.parseInt(event.value) > 0) intro.rows = Integer.parseInt(event.value);" />
</vbox>
</hbox>
</row>
<row>
Validation
<hbox>
<vbox>
<span sclass="edition-field">
Captcha and Colorbox requires
<a href="http://www.zkoss.org/download/zk.dsp" sclass="edition-field" label=" ZK PE or EE."/>
</span>
<textbox value="qwasdf" width="150px" onChange="cpa.value = self.value"/>
<captcha id="cpa" length="6" width="150px"
height="50px" />
</vbox>
<vbox>
<label value=" " pre="true"/>
(Case Insensitive)
<button label="Regenerate"
onClick="cpa.randomValue();" />
<hbox>
Background-Color:
<colorbox color="#FFFFFF" onChange="cpa.setBgColor(self.color); cpa.randomValue();" />
</hbox>
</vbox>
</hbox>
</row>
</rows>
</grid>