From Documentation

Jump to: navigation, search




The vlayout component is a simple vertical oriented layout. Added components will be placed underneath each other in a column.

Notice that hlayout and vlayout do not support splitter, alignment and packing. If you need them, please use ZK Component Reference/Layouts/Hbox and ZK Component Reference/Layouts/Vbox instead.


ZKComRef Hlayout Simple Example.PNG

         <button label="Button 1"/>
         <button label="Button 2"/>
         <button label="Button 3"/>
         <button label="Button 4"/>


The default spacing between two child components is 0.3em. You could modify it if you like:

<hlayout spacing="0">
  <button label="Click Me"/>

Resize Child Components' Height Dynamically

When a Vlayout's content changes (e.g. adding / removing components or component's visibility changes), it will resize all its child components' height dynamically.

The window's height below (line 6) will grow when we hide the blue-background div. This also works for vflex="min" which doesn't auto resize in a normal case.

	<vlayout height="400px" style="border: solid 1px">
		<button onClick="div.setVisible(false)" label="invisible the blue content"/>
		<div style="height: 400px;background-color: lightblue"
		<window border="normal" vflex="1">
			0px height at first

Supported events

Event Type
None None

Supported Children


Use cases

Version Description Example Location

Version History

Last Update : 2016/9/19

Version Date Content
5.0.4 August, 2010 new added component

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.

You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum