TwinColSelect buttons and column wrapping


My problem is that in a customfiled I wrote, the buttons and the second coulmn of the twincolselect is wrapping (is in a new line) however there is a plenty of space for them not to wrap. I tried the same code for the twincolselect in a simple UI without the customfield and everything works, so I’m stuck. Below is the code of my CustomField<ArrayList> and the image of the problem attached.
// I want to have data binding with a list (a fixed list is an input parameter and the user list will be binded to the field


public class ListFieldTwinCol extends CustomField<ArrayList<Integer>> {
    ArrayList<Integer> portsAvailable;
    TwinColSelect twinCol = new TwinColSelect();
    ArrayList<Integer> portSelected = new ArrayList<>();
    public ListFieldTwinCol(String caption, ArrayList<Integer> ports) {
        portsAvailable = ports;
        twinCol.setLeftColumnCaption("Existing ports");
        twinCol.setRightColumnCaption("User instance ports");
        twinCol.addListener(new Property.ValueChangeListener() {

            public void valueChange(Property.ValueChangeEvent event) {
                java.util.Set<Integer> selected = (java.util.Set<Integer>) twinCol.getValue();
                ArrayList<Integer> selectedPorts = new ArrayList<>(selected);

    protected Component initContent() {
    HorizontalLayout content = new HorizontalLayout();
    content.setWidth(100.0f, Sizeable.Unit.PERCENTAGE);
    return content;

    public Class<? extends ArrayList<Integer>> getType() {
        return (Class<ArrayList<Integer>>) (new ArrayList<Integer>()).getClass();
    public ArrayList<Integer> getValue() {
        return super.getValue();
    public void setValue(ArrayList<Integer> list){
    public void setPropertyDataSource(Property property) {
        if (super.getInternalValue()!= null) {
            twinCol.setValue(new HashSet<>(super.getInternalValue()));


Have you tried setting a width for the actual TwinColSelect?

What I’m more wondering about, is why do you have a CustomField at all? You have just two components there, a HorizontalLayout and a TwinColSelect inside of it. Unless you have more components being added to the HorizontalLayout, then the layout is completely unneccesary. Actually, that case, extending CustomField is also unnecessary as it just brings you additional complexity. Why not use TwinColSelect directly or extending TwinColSelect if you only modify the server-side functionality without any changes to the appearance.

Hi Kim,

I found the problem. I’m using the
dashboard theme
from the dashbord demo of vaadin. it doesn’t have an implementation for twincolselect. Using an other theme it works perfectly.
// I used a customfiled because simple twincolselect doesn’t worked well with bean biding with annotations and the code is nicer just calling a field instead of modificating it at place.