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).
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.
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. /
You could start by doing a really simple component with only a button and the VOverlay. this is about what you have to do.
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);
}
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. Ask ahead if you need more info!