Restricting the OptionGroup width in Vaadin

Question

I have a couple of OptionGroups with very long captions that run across the width of the page, which looks very bad. I tried restricting the width of the OptionGroup using setWidth and via CSS, and also tried restricting the width of the parent container; all without effect.

So I made a grid layout with an option group in the first column (spanning all rows), and individual labels for the captions in the second column (one per row). However, in case the captions span multiple lines (which they do in my case), this leads to the radio buttons / checkboxes no longer being aligned to the captions. (Regrettably, I'm not allowed to post images.) For instance,

(o) This is a multiline
(o) caption
      This is another multiline
      caption

I resolved this by creating one OptionGroup per label, and adding each option group in the first column:

(o) This is a multiline
      caption
(o) This is another multiline
      caption

Clearly, in case of radio buttons, this means multiple buttons can be selected at the same time, since they are no longer linked via a single OptionGroup. Therefore, I registered listeners which, each time a button is selected, de-select all other buttons. And this brings me to my problem; since this "unchecking" is done at the server side, there will unavoidably be some lag, meaning that for some time, multiple radio buttons will appear selected at the client side.

Any ideas on how to resolve this? I only started working with Vaadin recently, so I'm far from an expert. Is there some simple way of restricting the caption width (some magical undocumented CSS class), or do I need to extend / adapt the client-side widget implementation?

Thanks,

William

Answer 1

What you need is FlexibleOptionGroup add-on.

Here is an example implementation:

@Override
protected void init(VaadinRequest request) {
    Container cont = new IndexedContainer();
    cont.addContainerProperty("caption", String.class, "");
    // very long strings in the following setValue() methods 
    cont.getContainerProperty(cont.addItem(), "caption").setValue("I have...");
    cont.getContainerProperty(cont.addItem(), "caption").setValue("So I ma...");

    FlexibleOptionGroup fog = new FlexibleOptionGroup(cont);
    fog.setCaption("FlexibleOptionGroup:");
    fog.setItemCaptionPropertyId("caption");
    fog.setMultiSelect(true); // force using CheckBoxes

    VerticalLayout fogLayout = new VerticalLayout();
    Iterator<FlexibleOptionGroupItemComponent> iter;
    iter = fog.getItemComponentIterator();
    while(iter.hasNext()) {
        // OptionGroupItem part (CheckBox or RadioButton)
        FlexibleOptionGroupItemComponent fogItemComponent = iter.next();
        // CustomComponent part
        Label caption = new Label(fogItemComponent.getCaption());
        caption.setWidth(400, Unit.PIXELS);
        fogLayout.addComponent(new HorizontalLayout(fogItemComponent, caption));
    }
    setContent(fogLayout);
}

The above code produces: