Vaadin OptionGroup horizontal lay

General
1

I’ve been unable to get my OptionGroup to lay horizontally. Here is my code:

VerticalLayout torLayout = new VerticalLayout();

        ArrayList<String> referralOptions = new ArrayList<String>();
        referralOptions.add("Oncologist");
        referralOptions.add("Other Physician");
        referralOptions.add("Family/Friend");
        referralOptions.add("Advocacy Group");
        referralOptions.add("Other");

        OptionGroup typeOfReferralOG = 
                new OptionGroup("Referral Type:", referralOptions);

        // Lay the items out horizontally
typeOfReferralOG.setStyleName("v-select-optiongroup");
        typeOfReferralOG.addStyleName("horizontal");
        typeOfReferralOG.setSizeUndefined();
        typeOfReferralOG.setImmediate(true);

        if (isNew)
        {
            setTypeOfReferral("Onocologist");
            typeOfReferralOG.select("Oncologist");
        }

        typeOfReferralOG.addValueChangeListener(new ValueChangeListener()
        {
            @Override
            public void valueChange(
                    com.vaadin.data.Property.ValueChangeEvent event)
            {
                setTypeOfReferral(event.getProperty().getValue().toString());
            }
        });

        torLayout.setSizeUndefined();
        torLayout.addComponent(typeOfReferralOG);

In addition I’m using this in my optiongroup.scss file:

 /* Lay the options horizontally */
    .v-select-optiongroup-horizontal .v-select-option 
    {
        display: inline-block;
    }
    
    /* Avoid wrapping if the layout is too tight */
    .v-select-optiongroup-horizontal 
    {
        white-space: nowrap;
    }

    /* Some extra spacing is needed */
    .v-select-optiongroup-horizontal
    .v-select-option.v-radiobutton 
    {
        padding-right: 10px;
    }

Can anyone see where I’m going wrong? No matter what I’ve tried I still get a vertical layout of the radiobuttons.

2

Nevermind. Vaadin works fine I tracked it down to another style (border style) causing it to ignore the display: inline-block.