在Vaadin中限制OptionGroup的寬度

我有幾個OptionGroups，它有很長的標題，它們在頁面的寬度上運行，看起來非常糟糕。我嘗試使用setWidth和CSS限制OptionGroup的寬度，並試圖限制父容器的寬度;全部沒有效果。在Vaadin中限制OptionGroup的寬度

所以我在第一列選項組（跨越所有行），並在第二列的標題單獨的標籤（每行一個）做了一個網格佈局。但是，如果字幕跨越多行（我們的情況是這樣），這會導致單選按鈕/複選框不再與字幕對齊。（遺憾的是，我不能發表圖片。）例如，

（O）這是一個多
（O）標題
這是另一個多
標題

我解決了這個問題，方法是爲每個標籤創建一個OptionGroup，然後在第一列中添加每個選項組：

（O）這是一個多
字幕
（O）這是另一種多
字幕

顯然，在單選按鈕的情況下，這意味着可以同時選擇多個按鈕，因爲它們不再通過單個OptionGroup鏈接。因此，我註冊了聽衆，每次選擇一個按鈕時，取消選擇所有其他按鈕。這讓我想起了我的問題。由於這種「取消選中」是在服務器端完成的，所以不可避免地存在一些滯後，這意味着在一段時間內，在客戶端將出現選擇多個單選按鈕。

有關如何解決此問題的任何想法？我最近纔開始與Vaadin合作，所以我遠離專家。是否有一些簡單的方式來限制標題寬度（一些神奇的無證CSS類），還是我需要擴展/改編客戶端小部件實現？

感謝，

威廉

來源

2014-02-06 William

你需要的是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); 
}

以上代碼生成：

enter image description here

來源

2014-02-07 23:59:57 wypieprz

多謝您的回答！我花了很多時間尋找解決方案，但我想我使用了錯誤的關鍵字（或者看錯了地方）。我在Vaadin論壇上提出了同樣的問題;我將鏈接複製到此答案。 – William

在Vaadin中限制OptionGroup的寬度

回答

相關問題