스크롤 막대 목록 상자의 끝이 나뉘어져 있고 목록 헤더 중 하나가 표시되지 않습니다.

Question

8 열이있는 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 %로 vlayout의 폭을 설정하거나 도울 수있는 일에 hflex 여기 내 코드입니다. 현재, vlayout은 자녀를 맞추기 위해 필요한만큼 넓어 질 것입니다. 부모 (vlayout)에는 너비 제한이 없기 때문에 listbox의 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 뒤에 남은 공간 만 남기 때문에 수정됩니다.