0

Grid Hflex Issue. Please help me

asked 2012-11-08 10:57:47 +0800

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

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.

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2012-11-08 15:12:31 +0800

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

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

link publish delete flag offensive edit

answered 2012-11-09 00:33:12 +0800

twiegand gravatar image twiegand
1807 3

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

link publish delete flag offensive edit

answered 2012-11-09 02:35:36 +0800

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

ok Let me try

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-11-08 10:57:47 +0800

Seen: 111 times

Last updated: Nov 09 '12

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