ZK列表框:水平滚动条不显示hflex = min(在其他容器/ Tabbox中)

时间:2012-02-08 13:39:49

标签: listbox scrollbar zk

以下是问题所在:

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的空间底部。对不起,如果这是令人费解的,如果你把这样的东西放在一起你可能有一个想法。 此外,我当然不想要固定尺寸。

旁注:缩小(浏览器)窗口并没有缩小列表框 - 增长它没有问题。东西在这里!

谢谢!

1 个答案:

答案 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>

的问候, 阿曼