How to create caption of combobox at the same line? - vaadin

Question

Vaadin's comboBoxes were designed to show captions and items are line by line (you can see them in here). If I want to see them in a same line , what is the solution ?
Now I am trying to get as below ....
HorizontalLayout hlMain = new HorizontalLayout();
hlMain.addComponent(new Label("Gender:"));
final ComboBox gender = new ComboBox("" , genderList);
hlMain.addComponent(gender);
But I know above code is too ugly , So I am trying to use with CSS . I would like to know has there easy way to get it with Vaadin ? Any suggestions will be great help for me.

Answer 1

If you are willing to dedicate a layout to this, use a FormLayout:
// run with: spring run vaadin.groovy
#Grapes([
#Grab('org.vaadin.spring:spring-boot-vaadin:0.0.5.RELEASE'),
#Grab('com.vaadin:vaadin-server:7.4.4'),
#Grab('com.vaadin:vaadin-client-compiled:7.4.4'),
#Grab('com.vaadin:vaadin-themes:7.4.4'),
])
import org.vaadin.spring.annotation.VaadinUI
import com.vaadin.server.VaadinRequest
import com.vaadin.ui.*
#VaadinUI
class MyUI extends UI {
protected void init(VaadinRequest request) {
setContent(new FormLayout( // XXX
new ComboBox("Gender:").with{ addItem("M"); addItem("F"); it }
))
}
}
Your current code would work, if you would not put the empty caption on the ComboBox (it makes Vaadin think, that there is something to show and render an empty line, break, and then the combobox). Yet FormLayout is the superior solution.
// run with: spring run vaadin.groovy
#Grapes([
#Grab('org.vaadin.spring:spring-boot-vaadin:0.0.5.RELEASE'),
#Grab('com.vaadin:vaadin-server:7.4.4'),
#Grab('com.vaadin:vaadin-client-compiled:7.4.4'),
#Grab('com.vaadin:vaadin-themes:7.4.4'),
])
import org.vaadin.spring.annotation.VaadinUI
import com.vaadin.server.VaadinRequest
import com.vaadin.ui.*
#VaadinUI
class MyUI extends UI {
protected void init(VaadinRequest request) {
setContent(new HorizontalLayout(
new Label("Gender"),
new ComboBox().with{ addItem("M"); addItem("F"); it } // no label!
))
}
}

Answer 2

You can use Vaadin FormLayout component wherever you required to put caption before input fields.
Example:
// A FormLayout used outside the context of a Form
FormLayout fl = new FormLayout();
// Make the FormLayout shrink to its contents
fl.setSizeUndefined();
TextField tf = new TextField("A Field");
fl.addComponent(tf);
// Mark the first field as required
tf.setRequired(true);
tf.setRequiredError("The Field may not be empty.");
TextField tf2 = new TextField("Another Field");
fl.addComponent(tf2);