Adding scroll to GWT SuggestBox

Question

Does anyone know how to:

1) Add a scroll to the popup created by the SuggestBox?

2) How to customize the looks (CSS) of the SuggestBox efficiently?

I want to make above changes without touching the actual implementation as much as possible. Also this solution should support (IE7-IE8, FF, Chrome).

Thanks.

Answer 1

Use Firebug addon for Firefox (or IE/Chrome debugger) to inspect the element you need to modify its style and see if GWT has assigned it a style class name [or read its JavaDoc]. Here in you case its gwt-SuggestBoxPopup for outer element and lots of other style class names for inner elements like suggestPopupMiddle, suggestPopupMiddleCenterInner and suggestPopupContent. Use this class names to modify components style.

To add vertical (horizontal) scroll you need to specify height (width) or max-height and use overflow-y: scroll; (overflow-x: scroll;) or overflow: scroll; Use auto instead of scroll to hide the scollbar when not necessary.

So your short answer is:

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