-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi
Can some one help me how to align the fields in the window as shown in the image ?
Can we use grid layout or panel to show the fields as in the order ?
Please Note : We are using CE Version.
I would use a grid for this. Hope others can help with the right width of the columns.
best
Stephan
<?xml version="1.0" encoding="UTF-8" ?> <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?> <?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?> <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ --> <!-- Namespace dependent DataBinding Initiator. --> <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ --> <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./windowPatient" ?> <zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:w="http://www.zkoss.org/2005/zk/client" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd"> <window id="windowPatient" apply="${patientDetailCtrl}" border="normal" width="100%" height="100%"> <grid sclass="GridPlain"> <columns> <column align="left" width="300px" /> <column width="10px" /> <column align="left" width="300px" /> <column width="10px" /> <column align="left" width="300px" /> </columns> <rows> <row> <!-- Patient --> <vbox> <label value="Patient" style="font-weight: bold;" /> <hbox> <textbox id="txtb_Patient" value="" disabled="true" maxlength="100" hflex="1" /> <button label="Lookup" /> </hbox> </vbox> <space /> <!-- Provider --> <vbox> <label value="Provider" style="font-weight: bold;" /> <hbox> <textbox id="txtb_Provider" value="" disabled="true" maxlength="100" hflex="1" /> <button label="Lookup" /> </hbox> </vbox> <space /> <!-- Date From --> <vbox> <label value="From Date" style="font-weight: bold;" /> <textbox id="txtb_From_Date" value="" hflex="1" /> </vbox> </row> <row> <!-- Procedure --> <vbox> <label value="Procedure" style="font-weight: bold;" /> <textbox id="txtb_Procedure" value="" maxlength="100" hflex="1" /> </vbox> <space /> <!-- Lab test Name --> <vbox> <label value="Lab Test Name (Ordered)" style="font-weight: bold;" /> <textbox id="txtb_Lab_Test_Name" value="" readonly="true" maxlength="100" hflex="1" /> </vbox> <space /> <!-- Drug /Trade Name) --> <vbox> <label value="Drug (Trade Name)" style="font-weight: bold;" /> <textbox id="txtb_Drug" value="" hflex="1" /> </vbox> </row> <row> <!-- Ploblem List --> <vbox> <label value="Problem List" style="font-weight: bold;" /> <textbox id="txtb_Problem_List" value="" hflex="1" /> </vbox> </row> </rows> </grid> <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> </zk>
Thank you Stephan. You always great. Thank for your time to put in the example.
I would be happy if you give your comments on my another Post
Asked: 2012-10-05 14:00:15 +0800
Seen: 107 times
Last updated: Nov 08 '12