scrollbar 相关问题

这是问题的一个快照：链接到问题图片布局在没有 hflex="min" 的情况下可以正常工作 - 但当然，列太窄了。这是爆炸：这是问题的一个快照：问题图片链接布局在没有 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%">  <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> 问候，安缦

listbox scrollbar zk

回答 1 投票 0

Webkit 定制后 CSS 滚动条自动隐藏不起作用

Chrome 上滚动条的默认行为是隐藏直到使用为止。在野生动物园中，它们始终隐藏起来。添加这些自定义样式后，特别是宽度属性，都

html css scroll scrollbar

回答 1 投票 0

如何让窗口可以滚动而不是div？

我有一个问题，滚动条附加到内容框而不是窗口。内容框不是窗口的整个宽度，这使得中间的滚动条很尴尬。我该如何移动

javascript html css scroll scrollbar

回答 2 投票 0

Angular Material Table 的自定义滚动条，无需删除表格样式

当自定义滚动条具有透明背景时，如何防止 Angular Material 表格的表格样式消失？目前，发生以下情况（我将滚动条额外设置为...