Question

我正在尝试在listbox组件中创建一个groupbox，该组件有八列。然而，最后一列已经消失，我不知道为什么，即使我的列表框有一个水平滚动条。我试图添加：

`<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将尽可能宽，以适应其子女。由于父级（listbox）没有宽度限制，vlayout上的97％没有帮助。

第二，groupbox上的100％正确吗？那个容器是什么容器？如果groupbox的容器跨越整个页面，100％将使组合框也跨越整个页面;由于左侧有另一个框，groupbox超出了页面。

修改

在玩了一下你的zul之后，我认为这是第二种情况。看看这个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"会修复它，因为它只会留下div后面剩余的空间。

滚动条列表框的末尾被拆分，我的一个列表头没有出现

1 个答案: