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

第一个问题：为什么要将窗口的高度设置为＆＃34; min＆＃34;？这是一个无效值。浏览器将忽略呈现的html组件的元素样式。窗口将与内容一样高。

这就是问题所在：你的边框布局说'父母，你有多少空间给我，我拿你能给我的东西＆＃34; （身高：100％）。因此最终结果是窗口将具有0高度，因为它的子节点都不需要任何固定高度。

在zk documentation中了解这个确切的问题。

所以有两个解决方案：

将您的窗户高度设置为100％或90％或500px或任何高度，但是它会起作用。我用你的代码尝试了100％，它显示得很好。这样，窗口将负责确定高度。它占用整个浏览器窗口，边框布局将填充100％。
如果您希望内容（列表框）决定窗口的大小，请在列表框的所有父项上使用vflex="min"（窗口直到内部vlayout）这样，您的父母会问他们的孩子他们需要多少空间。这将被委托给列表框，列表框的大小由行或绝对高度或rows属性决定。（不然后使用弹性高度列表框，否则您再次遇到问题，没人想要决定高度，并且所有内容都会折叠为0或扩展到全高。）

Answer 2

我使用style属性来解决我在div，borderlayout等组件中的自动调整问题。

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

如何设置高度borderlayout ZK自动适合父级大小

2 个答案: