1

I'm new to vaadin. I came across with a bug that full name is not visible in twin-column component's values. I have very long names inside the left side of the twin-column. I increased the width of the component much as I can. But still some lines are there that not visible full name. I tried to add some css, even that didn't work.

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

I tried with this css line. Any wrong in here? Or any idea to solve this. Please help me on this..

Thank you in advance.

twin-column

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

Method where I'm creating the twinColumn inside a FormLayout

ssdehero
  • 786
  • 1
  • 11
  • 26
  • Vaadin is a server-side framework – the problem is client-side however. So please show client-side code that reproduces the problem, or at least an online example. – CBroe Oct 24 '13 at 10:55
  • @CBroe thank you for quick reply. see the edited answer. I didn't get what you say. I hope edited answer helps you. Anyway I want just show the full names inside the twin column. Even in wrapped format. thnx – ssdehero Oct 24 '13 at 11:02

1 Answers1

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

DOM structure of Vaadin's TwinColSelect

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.

Community
  • 1
  • 1
Hannes Obweger
  • 258
  • 1
  • 4
  • Thank you for the answer. I see. I realized it. I'll give up this `word-wrap` and trying in some other way. – ssdehero Nov 01 '13 at 04:16