Vaadin中的双列值中不显示全名

Question

我是vaadin的新手。我遇到了一个错误，在双列组件的值中看不到全名。我在双柱的左侧有很长的名字。我尽可能地增加了组件的宽度。但仍有一些线条没有可见的全名。 我试图添加一些css，即使这不起作用。

.v-select-twincol-options .v-select-twincol-break-word{word-wrap: break-word;}

我尝试了这条css线。这里有什么不对吗？或任何解决这个问题的想法。请帮帮我...

提前谢谢。

private TwinColSelect createTemplateSelectTwinColumn()
    {
        TwinColSelect twinColSelect = new TwinColSelect("Related Templates");
        twinColSelect.setNullSelectionAllowed(true);
        twinColSelect.setMultiSelect(true);
        twinColSelect.setImmediate(true);
        twinColSelect.setSizeFull();

        Collection<File> templates = getTemplates();

        Collections.sort((List<File>) templates, new Comparator<File>()
        {
            @Override
            public int compare(final File f1, final File f2)
            {
                return f1.getName().compareTo(f2.getName());
            }
        });

        for (File file : templates)
        {
            twinColSelect.addItem(file.getNodeId());
            twinColSelect.setItemCaption(file.getNodeId(), file.getName());
        }

        return twinColSelect;
    }

我在FormLayout

中创建twinColumn的方法

Answer 1

Vaadin的TwinColSelect最终在DOM中产生了两个标准的HTML选项列表控件;请参阅此示例的DOM：http://demo.vaadin.com/book-examples/book/#component.select.twincolselect.basic

但是，{p> word-wrap在选项列表项上是not possible。

考虑从两个Vaadin表创建“自己的”TwinColSelect。 Vaadin表在CSS样式方面更加灵活。