ZK6: grid/listbox shrunk in box

mixgho

29 Dec 2011 13:47:55 GMT

Both grids are shrunk in Chrome and Firefox doesn't show the label in the second window example.

<zk>
	<window width="500px" border="normal" title="Chrome FAIL">
		<hbox>
			<grid>
				<columns>
					<column label="First" />
					<column label="Second" />
				</columns>
				<rows>
					<row>
						<label value="First value" />
						<label value="Second value" />
					</row>
				</rows>
			</grid>
			<label value="Inline" />
		</hbox>
	</window>
	<separator />
	<window width="500px" border="normal" title="Firefox FAIL">
		<hlayout>
			<grid>
				<columns>
					<column label="First" />
					<column label="Second" />
				</columns>
				<rows>
					<row>
						<label value="First value" />
						<label value="Second value" />
					</row>
				</rows>
			</grid>
			<label value="Inline" />
		</hlayout>
	</window>
</zk>

Adding width="100%" hflex="1" to the hlayout component doesn't help and anyway the rendering is not consistent between browsers.

Is this the feature or a bug?

matthewgo

2 Jan 2012 10:55:52 GMT

Hi mixgho,
It's a browser limitation.
In general, the width of html table tag depends on child's width; and the width of html div tag will depend on parent's width.

In this use case, the html tags may not be able to find the target which determines the width.
Please refer to the following code

<zk>
	<window width="500px" border="normal" title="Chrome FAIL">
		<hbox hflex="1"> 
			<grid hflex="1">
				<columns>
					<column label="First" />
					<column label="Second" />
				</columns>
				<rows>
					<row>
						<label value="First value" />
						<label value="Second value" />
					</row>
				</rows>
			</grid>
			<label value="Inline" />
		</hbox>
	</window>
	<separator />
	<window width="500px" border="normal" title="Firefox FAIL">
		<hlayout hflex="1">
			<grid hflex="1">
				<columns>
					<column label="First" />
					<column label="Second" />
				</columns>
				<rows>
					<row>
						<label value="First value" />
						<label value="Second value" />
					</row>
				</rows>
			</grid>
			<label value="Inline" />
		</hlayout>
	</window>
</zk>

ZK - Open Source Ajax Java Framework

ZK6: grid/listbox shrunk in box