-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi
In latest version of ZK, i read that without specifying the column width, we can manage by hflex and vflex. Look at the example below
<?page title="Auto Generated index.zul"?> <zk> <style> /* Make Plain Grid + smaller comps + Padding */ /* "overflow:hidden ;" not working in Chrome/Safari */ .GridPlain tr.z-row td.z-row-inner,.GridPlain tr.z-row .z-cell,div.z-grid.GridPlain,.GridPlain tr.z-grid-odd td.z-row-inner,.GridPlain tr.z-grid-odd .z-cell,.GridPlain tr.z-grid-odd,.GridPlain tr.z-row-over>td.z-row-inner { border: none; zoom: 1; background: white none repeat scroll 0 0; border-top: none; border-top-style: none; border-top-width: 0px; padding-top: 1px; padding-left: 3px; padding-right: 3px; padding-bottom: 1px; border-left: none; border-right: none; border-bottom: none; border-bottom-style: none; border-bottom-width: 0px; } </style> <window title="Hello World!!" border="normal" width="100%" height="100%"> <grid sclass="GridPlain"> <columns> <column hflex="1">First</column> <column hflex="2">Second</column> <column hflex="1">Third</column> <column hflex="1">fourth</column> </columns> <rows> <row> <vbox> <label value="First Name" style="font-weight: bold;" /> <hbox> <textbox id="txtb_Patient" value="" disabled="true" maxlength="100" /> </hbox> </vbox> <vbox> <label value="Address1" style="font-weight: bold;" /> <hbox> <textbox id="txtb_Provider" value="" disabled="true" maxlength="100" /> </hbox> </vbox> <!-- Date From --> <vbox> <label value="From Date" style="font-weight: bold;" /> <textbox id="txtb_From_Date" value="" /> </vbox> </row> <row> <vbox> <label value="Last Name" style="font-weight: bold;" /> <textbox id="txtb_Procedure" value="" /> </vbox> <vbox> <label value="Address2" style="font-weight: bold;" /> <textbox id="txtb_Lab_Test_Name" value="" readonly="true" maxlength="100" /> </vbox> <vbox> <label value="Drug (Trade Name)" style="font-weight: bold;" /> <textbox id="txtb_Drug" value="" /> </vbox> </row> <row> <vbox> <label value="Middle Name" style="font-weight: bold;" /> <textbox id="txtb_Problem_List" value="" /> </vbox> </row> </rows> </grid> </window> </zk>
Here is the output
Now the following are my requirement.
1. I want to give more width for Last Name Text box ? I can use the width property. but i want to know how we can do using hflex or vflex.
2. Similarly Address1 i need to give more width i.e 80% of the second column width.
3. For address 2, i need to give more width i.e 60% of the second column width
Please help me to do achieve this.
a quick try:
<?page title="Auto Generated index.zul"?> <zk> <style> /* Make Plain Grid + smaller comps + Padding */ /* "overflow:hidden ;" not working in Chrome/Safari */ .GridPlain tr.z-row td.z-row-inner,.GridPlain tr.z-row .z-cell,div.z-grid.GridPlain,.GridPlain tr.z-grid-odd td.z-row-inner,.GridPlain tr.z-grid-odd .z-cell,.GridPlain tr.z-grid-odd,.GridPlain tr.z-row-over>td.z-row-inner { border: none; zoom: 1; background: white none repeat scroll 0 0; border-top: none; border-top-style: none; border-top-width: 0px; padding-top: 1px; padding-left: 3px; padding-right: 3px; padding-bottom: 1px; border-left: none; border-right: none; border-bottom: none; border-bottom-style: none; border-bottom-width: 0px; } </style> <window title="Hello World!!" border="normal" width="100%" height="100%"> <grid sclass="GridPlain"> <columns> <column width="25%">First</column> <column width="25%">Second</column> <column width="25%">Third</column> <column width="25%">fourth</column> </columns> <rows> <row> <vbox hflex="1"> <label value="First Name" style="font-weight: bold;" /> <textbox id="txtb_Patient" value="" disabled="true" maxlength="100" hflex="1" /> </vbox> <vbox hflex="1"> <label value="Address1" style="font-weight: bold;" /> <textbox id="txtb_Provider" value="" disabled="true" maxlength="100" hflex="1" /> </vbox> <!-- Date From --> <vbox> <label value="From Date" style="font-weight: bold;" /> <textbox id="txtb_From_Date" value="" /> </vbox> </row> <row> <vbox hflex="1"> <label value="Last Name" style="font-weight: bold;" /> <textbox id="txtb_Procedure" value="" hflex="1" /> </vbox> <vbox hflex="1"> <label value="Address2" style="font-weight: bold;" /> <textbox id="txtb_Lab_Test_Name" value="" readonly="true" maxlength="100" width="80%" /> </vbox> <vbox hflex="1"> <label value="Drug (Trade Name)" style="font-weight: bold;" /> <textbox id="txtb_Drug" value="" hflex="1" /> </vbox> </row> <row> <vbox hflex="1"> <label value="Middle Name" style="font-weight: bold;" /> <textbox id="txtb_Problem_List" value="" hflex="1" /> </vbox> </row> </rows> </grid> </window> </zk>
best
Stephan
Another option for the Last Name section to make the code look like this:
<vlayout> <label value="Last Name" style="font-weight: bold;" /> <textbox id="txtb_Procedure" value="" hflex="true"/> </vlayout>
Use vlayout instead of vbox and set the hflex at the textbox.
Regards,
Todd
ok Let me try
Asked: 2012-11-08 10:57:47 +0800
Seen: 111 times
Last updated: Nov 09 '12