滚动条列表框的末尾被拆分，我的列表标题之一没有出现

Question

我正在尝试在具有八列的 groupbox 组件内创建一个 listbox。但是最后一列不见了，我不知道为什么，即使我的列表框有一个水平滚动条。我尝试添加：

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

在我的 zk.xml 和许多事情中但它不工作。这是我的代码：

<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

关于问题的两个想法：

首先，将 vlayout 的宽度设置为 100% 或将 hflex 设置为 1 可能会有所帮助。现在，vlayout 将尽可能宽以适应其 children。 listbox 上的 97% 没有帮助，因为 parent (vlayout) 没有宽度限制。

其次，groupbox 上的 100% 是否正确？那个装在什么容器里？如果 groupbox 的容器横跨整个页面，100% 将使 groupbox 也横跨整个页面；由于左侧还有另一个框，因此 groupbox 超出了页面范围。

编辑

稍微玩了一下你的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>

这会产生类似于您的行为。但是将 groupbox 从 width="100%" 更改为 hflex="1" 可以修复它，因为它只需要剩余的 space 留在 div.

之后

滚动条列表框的末尾被拆分，我的列表标题之一没有出现

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

java

zk