How to make a grid's row fills space

asked 2011-05-10 10:03:37 +0800

Neus
1415 ● 14

Hi all,
I have a grid like this:

<div height="500px">
      <grid vflex="1">
		<columns>
			<column/>
			<column/>
		</columns>
		<rows>
			<row>
				<label id="LBLResumenTarea" value="Resumen" />
				<textbox id="TBResumenTarea" width="99%" sclass="Obligatorio"/>
			</row>
			<row vflex="1">
				<label id="LBLDescTarea" value="Desc" />
				<textbox id="TBDescTarea" width="98.6%" multiline="true" height="100%"/>
			</row>
			<row spans="2">
		         	<div>
					<listbox id="LBDocumentos" width="99.5%" rows="3">
						<listhead>
							<listheader id="LHNombre" width="250px" label="" />
							<listheader id="LHDescripcion" label="" />
							<listheader id="LHVerDoc" width="35px"/>
			        		</listhead>
					</listbox>
					<div width="99.5%" height="25px" sclass="BotoneraListBox" style="margin-bottom:5px">
						<toolbarbutton id="TBTAñadirDoc" label="_Añadir" tooltiptext="_Añadir nuevo documentos"/>
						<toolbarbutton id="TBTEliminarDoc" label="_Eliminar" tooltiptext="_Eliminar documento seleccionado" style="margin-left:10px" disabled="true"/>
					</div>
				</div>
			</row>
		</rows>
	</grid>
</div>

The Grid is 100% but it doesn't fill the space. I want the second row to fills all available space. How can I do that?

Thank you

delete flag offensive retag edit

3 Replies

Sort by » oldest newest

answered 2012-12-22 20:20:13 +0800

rdgrimes
735 ● 7

updated 2012-12-22 23:40:31 +0800

Here's a work around. In the given example, the div and grid height are 500px. You can make the second row, with the Desc textbox use up the rest of the area by setting the textbox to either 'height="300px"' or 'rows="25"'. It's not ideal, but if you're going to have a fixed grid height, it's not an unreasonable solution. I'm assuming that what you really want is not just the 2nd row to take up the balance of space, but the textbox to equally expand to fill its parent.

Even if the ZK team alters the grid to accommodate what you're asking, it isn't going to change the behaviour of the textbox inside. In other words, textbox will not reshape itself to fit the parent because it is designed to shape its height based on its content, if absent a fixed height measurement or fixed number of rows. If we think about it, how could the textbox component accommodate such an expectation? It would have to ignore its fluid height charateristics, when absent a fixed height or number of rows, but only if its parent has vflex="1".