GWT 具有水平滚动功能的水平面板答案

【问题标题】：GWT Horizontal panel with horizontal scrollingGWT 具有水平滚动功能的水平面板
【发布时间】：2012-03-02 17:30:47
【问题描述】：

有没有办法在水平面板中实现水平滚动？

或任何其他面板都可以用来实现下面提到的功能 -

要求是我正在创建一个搜索栏，当用户输入搜索项时添加搜索项（类似于此 - http://documentcloud.github.com/visualsearch/）好吧，我使功能正常工作，甚至外观相似，但在水平面板上却很挣扎。我使用水平面板作为搜索栏，并且它嵌入了一个建议框。因此，当用户输入数据时，搜索项会添加到水平面板中。但是当添加搜索项时，水平面板的大小会增大并移出屏幕，并且会出现浏览器的水平滚动条。但我想要水平面板本身的滚动条。这可以实现吗？想要一些想法......任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： gwt

【解决方案1】：

您可能想要使用 css overflow-x 属性。如果您希望它滚动，请将值设置为滚动或自动。如果您需要以特定方式限制 div 的大小，您可能需要以编程方式控制它。

【讨论】：

我试过这个 .. 但不幸的是最初没有工作，因为 GWT 水平面板在 HTML 中呈现为表格。因此，我认为我可以使用另一个包装面板，它将呈现为 DIV 标记。因此，使用简单面板将其包装起来，并使用您建议的 CSS 更改。它有效！！！！
@Deanna，尽管它有水平滚动条 SimplePanel 只能包含一个小部件。错误告诉我。如果我将 RootPanels 添加为单个“孩子”，例如AbsoluyePanel，它垂直排列自己的小部件并忽略您的 css 指令：/

【解决方案2】：

除了将您的 HorizontalPanel 放在滚动面板之外，我没有看到任何其他解决方案。然后我会添加一个 CSS 属性来防止显示垂直滚动条。

这是一个 ui.xml 摘录：

<ui:style>
    .scrollHorizontal{
        overflow-y: hidden !important;
        /* !important used to force override the style "overflow:scroll"
            of the ScrollPanel */
    }
</ui:style>

<g:ScrollPanel addStyleNames="scrollHorizontal">
    <g:HorizontalPanel ui:field="resultsPanel" />
</g:ScrollPanel>

您可能需要检查滚动面板的客户端高度，以便根据您的布局调整水平面板内项目的高度。

【讨论】：

哎呀，对不起，我没有看到你上面的评论。