给GWT SuggestBox添加滚动条

Question

有人知道如何：

1）为SuggestBox创建的弹出窗口添加滚动条？

2）如何高效地自定义SuggestBox的外观（CSS）？

我希望尽可能不改变实际实现就能进行以上更改。此解决方案还应支持（IE7-IE8、FF、Chrome）。

谢谢。

- user_1357

Answer 1

使用Firefox的Firebug插件（或IE / Chrome调试器）来检查您需要修改其样式的元素，并查看GWT是否已分配了样式类名[或阅读其JavaDoc]。在您的情况下，外部元素为gwt-SuggestBoxPopup，内部元素有许多其他样式类名，例如suggestPopupMiddle、suggestPopupMiddleCenterInner和suggestPopupContent。使用这些类名来修改组件样式。

要添加垂直（水平）滚动条，您需要指定高度（宽度）或max-height并使用overflow-y:scroll;（overflow-x:scroll;）或overflow:scroll;。当不必要时，请使用auto而不是scroll来隐藏滚动条。

因此，您的简短回答是：

.suggestPopupContent{
    height: 100px;    
    overflow-y: scroll;
}

- Ali Shakiba

---

我使用了CSS技巧在我的建议弹出窗口上添加滚动条，它有效，但是有一个错误：如果您使用箭头键浏览选项，滚动不会跟随！我不知道如何更改它。 - Maxime ARNSTAMM

@MaximeARNSTAMM 不确定，但您可能可以使用 onfocus 和几行代码来滚动聚焦选项。 - Ali Shakiba

@MaximeARNSTAMM 请查看答案 https://dev59.com/il3Va4cB1Zd3GeqPAnNG#24235088 ：您将使用与此答案相同的CSS，以及一个相对简单的SuggestBox扩展（而不是像其他答案那样直接修改SuggestBox）。 - cellepo

Answer 2

2）

new SuggestBox().setStyleName(/* 在此处输入你的样式 */);

- user467871

---

这不会影响建议面板（实际弹出窗口）。 - l3dx