End of scrollbar listbox was split and one of my listheaders is not appearing

Question

I am trying to create a listbox inside a groupbox component which has eight columns. However the last column is gone and I don't know why, even though my listbox has a horizontal scrollbar. I've tried to add:

`<library-property>    
  <name>org.zkoss.zul.nativebar</name>    
  <value>true</value>
</library-property>`

In my zk.xml and many things but it's not working. Here is my code:

<groupbox
    visible="@bind(vm.gbxGridPo)"  width="100%">
    <caption label="${labels.common.label.hasil_pencarian}" style="color:blue" />
    <vlayout >
        <checkbox  name="chkBPKB" label="Print SPP/SIP BPKB" checked="@bind(vm.chkBPKB)" />
        <listbox model="@load(vm.poDTOs)" mold="paging" pageSize="10"
                 emptyMessage="Tidak ada data" checkmark="true"
                 width="97%" style="overflow:hidden"
                 selectedItem="@bind(vm.aksiSelectedPO)"
                 onClick="@command('onCheckRadio')">
            <listhead  >
                 <listheader label="${labels.common.label.pilih}" align="center" width="50px" />
                 <listheader label="${labels.common.label.sentra}" align="center" sort="auto(sentraID)"  width="150px" />
                 <listheader label="${labels.common.label.unit}" align="center" sort="auto(unitID)" width="150px" />
                 <listheader label="${labels.common.label.jenis_pihak_ketiga}" align="center" sort="auto(thirdPartyTypeID)" width="150px" />
                 <listheader label="${labels.common.label.nama_pihak_ketiga}" align="center" sort="auto(thirdPartyName)" width="150px"  />
                 <listheader label="${labels.common.label.no_po}" align="center" sort="auto(poNumber)"  width="120px"/>
                 <listheader label="${labels.common.label.nama_lengkap}" align="center" sort="auto(customerName)" width="180px" />
                 <listheader label="${labels.common.label.no_aplikasi}" align="center" sort="auto(orderID)" width="140px"/>
             </listhead>
             <template name="model"  status="s" var="item">
                 <listitem>  
                     <listcell />
                     <listcell label="@load(item.sentraID)" />
                     <listcell label="@load(item.unitID)" />
                     <listcell label="@load(item.thirdPartyTypeID)" />
                     <listcell label="@load(item.thirdPartyName)" /> 
                     <listcell label="@load(item.poNumber)" /> 
                     <listcell label="@load(item.customerName)" /> 
                     <listcell label="@load(item.orderID)" /> 
                 </listitem>                               
            </template>  
        </listbox>
    </vlayout>
</groupbox>

Answer 1

Two ideas about what is going wrong:

First, setting the vlayout 's width to 100% or hflex to 1 could help. Right now, the vlayout will be as wide as necessary to fit its children. The 97% on the listbox don't help, since the parent ( vlayout ) does not have a width restriction.

Second, is the 100% on groupbox correct? What container is that one in? If the groupbox 's container spans the whole page, 100% will make the groupbox also span the whole page; and since there is another box on the left, the groupbox is extends beyond the page.

EDIT

After playing with your zul a bit, I think it is the second case. Look at this zul:

<hlayout width="100%">
    <div width="100px" height="100px" style="background: green" />
    <groupbox width="100%">
        <caption label="Bla" />
        <vlayout >
            <checkbox  label="Check" />
            <listbox model="@load(vm.poDTOs)" width="97%" style="overflow:hidden">
                <listhead  >
                     <listheader label="1" width="50px" />
                     <listheader label="2" width="150px" />
                     <listheader label="2" width="150px" />
                     <listheader label="2" width="150px" />
                     <listheader label="2" width="150px" />
                     <listheader label="2" width="150px" />
                     <listheader label="2" width="150px" />
                     <listheader label="2" width="150px" />
                     <listheader label="2" width="150px" />
                 </listhead>
            </listbox>
        </vlayout>
    </groupbox>
</hlayout>

This produces behavior looking similar to yours. But changing the groupbox from width="100%" to hflex="1" fixes it, as it will only take the remaining space left behind the div .