ZK 列表框:当 hflex=min 时水平滚动条不会出现(在其他容器/选项卡框中)

问题描述 投票:0回答:1

这是问题的一个快照:

问题图片链接

布局在没有 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;”添加到选项卡面板 - 这会破坏我对选项卡面板的使用。事实上,我在这段代码周围有一个外部选项卡面板,并且必须在那里添加滚动条,这使得所有选项卡面板增加滚动条...滚动条甚至不在选项卡面板空间的底部。很抱歉,如果这很复杂,如果您布置了这样的内容,您可能会有一个想法。 此外,我当然不想要固定尺寸。

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

谢谢!

listbox scrollbar zk
1个回答
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>

问候, 安缦

© www.soinside.com 2019 - 2024. All rights reserved.