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.

Onieonion

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;
}

Suchta

I used the css trick to add a scrollbar on my suggest popup, it works, but there's a bug : if you use the arrow keys to navigate through choices, the scrolling does not follow ! I don't know how to change that. – Mettah

@MaximeARNSTAMM Not sure but you may be able to use onfocus and few lines of code to scroll in focused option. – Suchta

@MaximeARNSTAMM see the answer https://mcmap.net/q/1772408/-how-to-auto-scroll-gwt-suggestbox-with-max-height-and-overflow-y-scroll : You will use the same CSS as this answer, along with a relatively simple SuggestBox extension (as opposed to hacking into SuggestBox itself like many other answers do). – Drudge

Answer 2

2)

new SuggestBox().setStyleName(/* your style here */);

Impression

This doesn't affect the suggestion panel (the actual popup) – Yeh