高さを設定する方法borderlayout ZKを親のサイズに自動的に合わせる

Question

なぜborderlayoutが設定されているのですか？height="100%"が正しく動作しませんが、ピクセルを使用して高さを設定するとうまくいきます。vflex="1"を追加しようとしています。それは自動的に親のサイズに合う？これは私のZULコードです：

<zk xmlns="http://www.zkoss.org/2005/zul"> 
    <window border="none" width="90%" height="min" 
      apply="org.zkoss.bind.BindComposer" 
      viewModel="@id('vm') @init('com.dp.acction.adira.bitozen.interfaces.web.ui.viewmodel.CetakMainVM')"> 
     <!-- SUB-SUB -->   
    <borderlayout height="100%"> 
     <center> 
      <borderlayout> 
       <west size="25%" collapsible="true"> 
        <div style="background:#B8D335"> 
         <label value="Test layout" /> 
        </div> 
       </west> 
      <center> 
       <div> 
        <vlayout> 
         <groupbox width="100%" visible="true"> 
            <caption label="${labels.common.label.hasil_pencarian}" 
            style="color:blue" /> 
            <vlayout hflex="1" width="80%"> 
             <checkbox name="chkBPKB" label="Print SPP/SIP BPKB" checked="@bind(vm.chkBPKB)" /> 
             <listbox model="@load(vm.poDTOs)" 
              mold="paging" 
              pageSize="10" 
              height="50%" 
              emptyMessage="Tidak ada data" 
              checkmark="true" 
              width="100%"   
              selectedItem="@bind(vm.aksiSelectedPO)" 
              onClick="@command('onCheckRadio')" style="overflow:hidden"> 
              <listhead > 
                <listheader label="${labels.common.label.pilih}" width="50px" align="center"/> 
                <listheader label="${labels.common.label.sentra}" width="150px" align="center"/> 
                <listheader label="${labels.common.label.unit}" width="150px" align="center"/> 
                <listheader label="${labels.common.label.jenis_pihak_ketiga}" width="150px" align="center"/> 
                <listheader label="${labels.common.label.nama_pihak_ketiga}" width="150px" align="center"/> 
                <listheader label="${labels.common.label.no_po}" width="150px" align="center"/> 
                <listheader label="${labels.common.label.nama_lengkap}" width="150px" align="center"/> 
                <listheader label="${labels.common.label.no_aplikasi}" width="150px" align="center"/> 
               </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>  
        </vlayout> 
       </div> 
      </center> 
      </borderlayout> 
     </center>  
    </borderlayout> 
    </window> 
</zk> 

私はこのことについて探しています私はこの thread in zk forumを認めなかったが、まだ取得ソリューション。

Answer 1

まず問題：なぜあなたは「分」に、ウィンドウのheigthを設定するのですか？これは無効な値です。レンダリングされたhtmlコンポーネントの要素スタイルは、ブラウザによって無視されます。ウィンドウは、コンテンツに必要なだけ高くなります。

そして、それは問題である：あなたのボーダーレイアウトは述べています（100％高さ）「あなたは私のために持っているか、どのくらいのスペースの親を、私はあなたが私を与えることができるもの取ります」。その結果、最終的な結果は、子供のどれも固定高さを要求しないため、ウィンドウの高さは0になります。

zk documentationで、まさにこの問題についての記事を読みます。

だから、2つのソリューションがあります：

• 100％もしくは分が、90％または500pxなどまたはanyhtingにあなたの窓の高さを設定し、それがうまくいくが。私はあなたのコードで100％試してみました。このようにして、ウィンドウが高さを決定することになります。それはブラウザウィンドウ全体を取り、境界レイアウトは100％を占めるでしょう。
• あなたがコンテンツ（リストボックス）リストボックス（インナーvlayoutまでの窓）のすべての親にこの方法をvflex="min"を使用し、ウィンドウのサイズを決定したい場合は、ご両親は、彼らが必要とするどのくらいのスペースが子どもを聞いてきます。これは、行、または絶対高さ、またはrows属性によってサイズが設定されたリストボックスに委任されます。 （そうでなければ、誰もが高さを決定するために望んでいないことを改めて問題があり、0に至るまでのいずれか崩壊するか、完全な高さに展開し、リストボックスのためない使用柔軟な高さを実行してください。）

Answer 2

私はスタイルを使用div、borderlayoutなどのコンポーネントで自分の問題を解決するための属性です。

<listbox vflex="max" style="height: calc(100%)" width="100%">