スクロールバーのリストボックスの最後が分割され、リストヘッダーの1つが表示されません

Question

groupboxコンポーネントの中にlistboxを作成しようとしています。しかし、私のリストボックスに水平スクロールバーがあるにもかかわらず、最後の列がなくなって、なぜかわからない。私zk.xmlと多くのものでは

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

を が、それは働いていない：私は、追加しようとしました。ここに私のコードは次のとおりです。間違って起こっているかについて

<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

つのアイデア：

まず、100％または1〜hflexにvlayoutの幅を設定することは助けることができます。今、vlayoutは、その子供たちに合うように必要な幅になります。親（vlayout）には幅の制限がないため、listboxの97％は役に立ちません。

第2に、groupboxの100％は正しいですか？そのコンテナはどんなコンテナですか？ groupboxのコンテナがページ全体にまたがっている場合、100％はグループボックスもページ全体に広げます。左側に別のボックスがあるため、groupboxはページを越えています。

EDIT

あなたの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の後ろに残ります。