这是问题的一个快照:
布局在没有 hflex="min" 的情况下可以正常工作 - 但当然,列太窄了。这是爆炸:
<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
<style>
.module-alternative-amount-cell {
text-align: right;
}
.cost-entry-alternative-amount-cell {
text-align: right;
}
</style>
<window id="thisEditor" width="99%">
<!-- header label -->
<vbox>
<space height="5px" />
<hbox>
<space width="5px" />
<label id="header" value="A header"
style="font-weight:bold;font-size:16px;color:#525252" />
</hbox>
<space height="5px" />
</vbox>
<groupbox mold="3d">
<caption label="General Information"
style="font-weight:bold">
</caption>
<grid>
<columns>
<column label="" width="20%" valign="top" />
<column label="" width="80%" valign="top" />
</columns>
<rows>
<row style="background: white;border:none">
<label value="Name" />
<textbox id="nameText" width="350px" ></textbox>
</row>
</rows>
</grid>
</groupbox>
<space height="5px" />
<groupbox mold="3d">
<tabbox id="editorTabbox">
<tabs>
<tab label="A" />
<tab label="M" />
</tabs>
<tabpanels>
<tabpanel >
<listbox >
<listhead sizable="true">
<listheader label="Name"
sort="auto(name)" sortDirection="descending" />
<listheader label="Description" />
</listhead>
<listitem >
<listcell label="n1" />
<listcell label="d1" />
</listitem>
<listitem >
<listcell label="n2" />
<listcell label="d2" />
</listitem>
</listbox>
</tabpanel>
<tabpanel id="mtp" >
<vbox id="modulesTabpanelVbox" spacing="2" width="99%">
<listbox >
<listhead sizable="true">
<listheader label="Name"
sort="auto(name)" sortDirection="descending" hflex="min"/>
<listheader label="Description Description Description Description Description Description" hflex="min" />
<listheader label="Description Description Description Description Description" hflex="min" />
<listheader label="Description" hflex="min"/>
<listheader label="Description" hflex="min"/>
</listhead>
<listitem >
<listcell label="n1" />
<listcell label="d1" />
<listcell label="d1" />
<listcell label="d1" />
<listcell label="d1" />
</listitem>
<listitem >
<listcell label="n2" />
<listcell label="d2" />
<listcell label="d2" />
<listcell label="d2" />
<listcell label="d2" />
</listitem>
</listbox>
<listbox >
<listhead sizable="true">
<listheader label="Name"
sort="auto(name)" sortDirection="descending" hflex="min"/>
<listheader label="Description" hflex="min"/>
<listheader label="Description Description Description Description Description" hflex="min"/>
<listheader label="Description" hflex="min"/>
<listheader label="Description Description Description Description" hflex="min"/>
</listhead>
<listitem >
<listcell label="n1" />
<listcell label="d1" />
<listcell label="d1" />
<listcell label="d1" />
<listcell label="d1" />
</listitem>
<listitem >
<listcell label="n2" />
<listcell label="d2" />
<listcell label="d2" />
<listcell label="d2" />
<listcell label="d2" />
</listitem>
</listbox>
</vbox>
</tabpanel>
</tabpanels>
</tabbox>
</groupbox>
</window>
</zk>
考虑到示例的长度,我只添加了几列,请缩小浏览器窗口以查看问题,然后重新加载页面。
(编辑:我在列表头上添加了 sizing=true ,现在您可以通过使列更宽来强制显示水平滚动条。此外,只有在有两个选项卡时才能显示滚动条。)
背景:我发现了一些可能朝同一方向发展的问题,但我没有找到解决我的问题的方法。请注意,我不想将“overflow:auto;”添加到选项卡面板 - 这会破坏我对选项卡面板的使用。事实上,我在这段代码周围有一个外部选项卡面板,并且必须在那里添加滚动条,这使得所有选项卡面板增加滚动条...滚动条甚至不在选项卡面板空间的底部。很抱歉,如果这很复杂,如果您布置了这样的内容,您可能会有一个想法。 此外,我当然不想要固定尺寸。
旁注:缩小(浏览器)窗口并不会缩小列表框 - 增大列表框没有问题。这里有东西!
谢谢!
这可能会解决你的问题,我在VBOX之前添加了一个DIV,你可以在下面注意到它
<tabpanel id="mtp" > <--------## your 2nd panel ###
<div style="overflow:auto;position:relative"> <--change###
<vbox id="modulesTabpanelVbox" spacing="2" width="99%">
<listbox >
<listhead sizable="true">
<listheader label="Name"
sort="auto(name)" sortDirection="descending" hflex="min"/>
<listheader label="Description Description Description Description Description Description" hflex="min" />
<listheader label="Description Description Description Description Description" hflex="min" />
<listheader label="Description" hflex="min"/>
<listheader label="Description" hflex="min"/>
</listhead>
<listitem >
<listcell label="n1" />
<listcell label="d1" />
<listcell label="d1" />
<listcell label="d1" />
<listcell label="d1" />
</listitem>
<listitem >
<listcell label="n2" />
<listcell label="d2" />
<listcell label="d2" />
<listcell label="d2" />
<listcell label="d2" />
</listitem>
</listbox>
<listbox >
<listhead sizable="true">
<listheader label="Name"
sort="auto(name)" sortDirection="descending" hflex="min"/>
<listheader label="Description" hflex="min"/>
<listheader label="Description Description Description Description Description" hflex="min"/>
<listheader label="Description" hflex="min"/>
<listheader label="Description Description Description Description" hflex="min"/>
</listhead>
<listitem >
<listcell label="n1" />
<listcell label="d1" />
<listcell label="d1" />
<listcell label="d1" />
<listcell label="d1" />
</listitem>
<listitem >
<listcell label="n2" />
<listcell label="d2" />
<listcell label="d2" />
<listcell label="d2" />
<listcell label="d2" />
</listitem>
</listbox>
</vbox>
</div> <----- change
</tabpanel>
问候, 安缦