combobox and scrollbar

Vaadin 6 / 7 / 8 Framework UI
1

Is it possible to add scrollbars to combobox.

I looked at the demo:
http://demo.vaadin.com/sampler/#Components/Selects/ComboBoxContains

and wondered if it would be difficult to have smoother scrolling by adding scrollbar (like in native. native is out of option because of icon)

2

I don’t think you can just switch it. You probably have to do your own widget. The client side of the ComboBox seems to be VListSelect, so that’s the one to extend. I’m having a hard time interpreting the component but TooltipListBox seems to be the component that is shown when you click the arrow down button, showing the options. Basically, you just have to replace that one component inside ListSelect. I’m not sure if there is another component available that you can choose instead of that one, probably not if you need icons and whatnots. One possiblity to use a one-column table that supports normal scrolling, icons etc :slight_smile:

To summarize, the best way to go would probably be to extend AbstractSelect and take model out of ListSelect. Then again, I could be way off. :slight_smile:

3

Hm, putting plain Panel with setScrollable to ComboBox wouldn’t be an option? Panel has very nice scroollable property. I sometimes use:
Panel (setScrollable) , which contains GridLayout (1,1) with width=100%, which contains tree

But then again, I really wouldn’t like to mess with gwt - just to complicated. I can live with default implementation.

4

Hi,

There are plans to implement scrollbars for the ComboBox: http://dev.vaadin.com/ticket/1685
Due to lazyloading and such, it’s a fairly big change, and has not been done yet.

It’s also one of those things that would be really cool, but in the end, filtering usually removes the need (it’s usually much easier to type a few characters and then select the desired item from the first page, than it is to scroll to find the item on page N). Thus we’ve not done it yet.

Best Regards,
Marc

5

Indeed, filtering is the way to go with the Combobox.

But I see we have another valid need here, a regular select with icons, without filtering.

That version could be done without lazy-loading, and could thus easily use scrollbars (or no scrollbars like in OS X selects, just scrolling when the mouse cursor is in the edge areas).

How about an enhancement ticket?

6

There is a small hack that can be useful to someone. If you set the combobox.getpagelength(your_item.size()) and the list of your_item is large enough to fit in the window, the scrooll bar will appear

7

Inspired by this solution: https://java-liferay.blogspot.com/2013/06/disabling-vaadin-comboboxs-paging.html

I found an easier way to do it without recompiling widgetset:

public class ScrollableComboBox<T> extends ComboBox<T> {
	private static final long serialVersionUID = 1L;

	public ScrollableComboBox() {
		setPageLength(0);
		addStyleName("scrollable-combobox");
	}
}

.v-filterselect-suggestpopup-scrollable-combobox {
	max-height: 200px;
	overflow: auto !important;
}