<zk xmlns:html="http://www.w3.org/1999/xhtml">
<style>
.helptextbox {
    margin: 1em;
}
.level1box, .level2box {	
	border: 1px solid #999999;
	padding: 4px;
	margin: 0px;
}

.level1box {
	font-style: italic;
	margin-bottom: 10px;
}
</style>
<tabbox>
<tabs>
<tab label="Test" />
</tabs>
<tabpanels>
<tabpanel>
<hlayout>
  <hlayout hflex="1">
    <vlayout hflex="1" sclass="level1box">
	<vlayout hflex="1">
	<grid width="350px">
	    <columns>
		    <column hflex="1" />
	    	<column hflex="2" />
	    </columns>
	    <rows>
	        <row>Username:<textbox id="email" hflex="1" /></row>
	        <row>Password:<textbox id="password" hflex="1" type="password" />
	    	</row>
	    </rows>
	</grid>
	</vlayout>
	<button id="authenticate" label="Log On" onClick="doClick()" />
	<vlayout id="authenticationBox" hflex="1" />
	</vlayout>
  </hlayout>
  <hlayout hflex="2">
    Second box is here
  </hlayout>
</hlayout>
</tabpanel>
</tabpanels>
</tabbox>
<zscript>
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Label;
doClick() {
  Label l = new Label("Is this a ZK bug? The text here is cut off and the parent component does not resize as expected. Please fix this.");
  l.setHflex("1");
  Hbox hb = new Hbox();
  hb.getChildren().clear();
  hb.setHflex("1");
  hb.appendChild(l);
  authenticationBox.appendChild(hb);
}
</zscript>
</zk>