0

Form Design Help

asked 2012-10-05 14:00:15 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

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.

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2012-10-05 15:28:20 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

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>

link publish delete flag offensive edit

answered 2012-10-05 18:10:12 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

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

link publish delete flag offensive edit

answered 2012-11-08 10:58:47 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

Hi Stephan.

I need one more help related to this design. Please refer here

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-10-05 14:00:15 +0800

Seen: 107 times

Last updated: Nov 08 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More