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

我在其中创建 twinColumn 的方法FormLayout

Answer 1

Vaadin's TwinColSelect eventually results in two standard HTML option list controls in the DOM; see the DOM of this example: http://demo.vaadin.com/book-examples/book/#component.select.twincolselect.basic

word-wrap is, however, not possible on option list items.

Consider creating your "own" TwinColSelect from two Vaadin tables. Vaadin tables are much more flexible regarding CSS styling.