以下是问题所在:
Link to a picture of the problem
布局在没有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>
为了示例的长度,我只添加了几列,请将浏览器窗口缩小以查看问题,然后重新加载页面。
(编辑:我在列表头上添加了sizable = true,现在您可以通过使列更宽来强制显示水平滚动条。此外,只有在有两个选项卡时才能显示滚动条。)
背景:我发现一些问题可能会朝着同一个方向发展,但我找不到问题的解决方案。请注意,我不想在tabpanel中添加'overflow:auto;',这会破坏我使用Tabpanel。实际上我在这个代码周围有一个外部tabpanel,并且必须在那里添加滚动条,这使得所有tabpanels滚动条增长...滚动条甚至不在tabpanel的空间底部。对不起,如果这是令人费解的,如果你把这样的东西放在一起你可能有一个想法。 此外,我当然不想要固定尺寸。
旁注:缩小(浏览器)窗口并没有缩小列表框 - 增长它没有问题。东西在这里!
谢谢!
答案 0 :(得分:0)
这可能会解决你的问题,我在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>
的问候, 阿曼