[英]End of scrollbar listbox was split and one of my listheaders is not appearing
I am trying to create a listbox
inside a groupbox
component which has eight columns. 我正在尝试在具有八列的groupbox
组件内创建一个listbox
。 However the last column is gone and I don't know why, even though my listbox has a horizontal scrollbar. 但是,即使我的列表框具有水平滚动条,最后一列也已消失,我也不知道为什么。 I've tried to add: 我尝试添加:
`<library-property>
<name>org.zkoss.zul.nativebar</name>
<value>true</value>
</library-property>`
In my zk.xml and many things but it's not working. 在我的zk.xml和许多东西中,但是它不起作用。 Here is my code: 这是我的代码:
<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>
Two ideas about what is going wrong: 关于出问题的两个想法:
First, setting the vlayout
's width to 100% or hflex to 1 could help. 首先,将vlayout
的宽度设置为100%或将hflex设置为1可能会有所帮助。 Right now, the vlayout
will be as wide as necessary to fit its children. 现在, vlayout
将根据需要适合其子级。 The 97% on the listbox
don't help, since the parent ( vlayout
) does not have a width restriction. listbox
上的97%没有帮助,因为父级( vlayout
)没有宽度限制。
Second, is the 100% on groupbox
correct? 第二, groupbox
上的100%是否正确? What container is that one in? 那是什么容器? If the groupbox
's container spans the whole page, 100% will make the groupbox also span the whole page; 如果groupbox
的容器跨越整个页面,则100%会使groupbox也跨越整个页面; and since there is another box on the left, the groupbox
is extends beyond the page. 并且由于左侧还有另一个框,因此groupbox
超出了页面范围。
EDIT 编辑
After playing with your zul a bit, I think it is the second case. 稍微玩了一下zul之后,我认为是第二种情况。 Look at this 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>
This produces behavior looking similar to yours. 这会产生类似于您的行为。 But changing the groupbox
from width="100%"
to hflex="1"
fixes it, as it will only take the remaining space left behind the div
. 但是将groupbox
从width="100%"
更改为hflex="1"
解决此问题,因为它只会占用div
后面的剩余空间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.