How to programatically expand Select component?

Vaadin 6 / 7 / 8 Framework UI
1

Hi, I’m new to Vaadin and have a requirement where :

User clicks a button which sends a query to the server to retrieve a list. I then want to populate a single Select with the results and display expanded view. What I haven’t found is how to force the Select to expand. Or better still have a TextField with an expanded list displayed below it. (with z-index: 1).

Any ideas would be appreciated.

chris.

2

It can be done by doing an own widget. You can use a TextBox (/VTextField) + Button (/VButton) for the search and VOverlay to show the results. VOverlay opens a small “pop-up” window - for example the Select component uses it to show the drop down.

You can’t really use a separate layout positioned absolutely/relatively with a z-index to show the results, as about every DOM element in Vaadin has overflow:hidden and that will cut the content of the layout. You can still do it if you put the layout directly under the body tag in html, but then it is very hard to position the layout just under the TextField.

An own component is the way to go. :confused:

3

First thanks for the prompt reply!

I hadn’t noticed the VOverlay class. This is just what I was looking for.

cheers

4

Hi Jens,

Do you have an example code snippet as to how the Select class uses VOverlay - or anything similar that would point me in the right direction for creating my own widget. If so would be a great help. /

5

You could start by doing a really simple component with only a button and the VOverlay. this is about what you have to do.

  1. In the constructor - initialize the button and the overlay:
Button button;
VOverlay popup;

public VMyOwnFancySelect {
  FlowPanel panel = new FlowPanel();
  button = new Button("Click me", clickListener);
  popup = new VOverlay(false, false, true);
  popup.add(new Text("Hello!"));
  panel.add(button);
  initWidget(panel);
}
  1. In the clickListener you position the popup and set it visible

public void onClick(Widget sender) {
  int top = this.getAbsoluteTop() + this.getOffsetHeight();
  int left = this.getAbsoluteLeft();
  popup.setPopupPosition(left, top);
  popup.setWidth(this.getOffsetWidth() + "px");
  popup.show();
}

I think that will get you started. Note that this is pseudo code written directly into the forum posts - no guarantees. :slight_smile: Ask ahead if you need more info!