css - 全名在 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

然而，

word-wrap 是 not possible在选项列表项上。

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