限制Vaadin中的OptionGroup宽度

Question

我有几个具有很长字幕的OptionGroup，它们在页面宽度上运行，看起来非常糟糕。我尝试使用setWidth和CSS限制OptionGroup的宽度，并尝试限制父容器的宽度;一切都没有效果。

所以我在第一列（跨越所有行）中创建了一个带有选项组的网格布局，并在第二列中创建了标题的单个标签（每行一个）。但是，如果字幕跨越多行（在我的情况下它们会这样做），这会导致单选按钮/复选框不再与字幕对齐。 （遗憾的是，我不允许发布图片。）例如，

（o）这是一条多线 （o）标题
这是另一条多线 字幕

我通过为每个标签创建一个OptionGroup并在第一列中添加每个选项组来解决此问题：

（o）这是一条多线 标题
（o）这是另一条多线 字幕

显然，对于单选按钮，这意味着可以同时选择多个按钮，因为它们不再通过单个OptionGroup链接。因此，我注册了一些听众，每次选择一个按钮时，都会取消选择所有其他按钮。这让我想到了我的问题;由于这种“取消检查”是在服务器端完成的，因此不可避免地存在一些延迟，这意味着在一段时间内，会在客户端选择多个单选按钮。

有关如何解决此问题的任何想法？我最近才开始和Vaadin合作，所以我远非专家。是否有一些简单的方法来限制标题宽度（一些神奇的未记录的CSS类），或者我是否需要扩展/调整客户端小部件实现？

谢谢，

威廉

Answer 1

您需要的是FlexibleOptionGroup插件。

以下是一个示例实现：

@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);
}

上面的代码产生：