Tree width calculation with icon

It seems the calculation of a trees width is not calculated with its icon. The code below works as expected until an icon is introduced.


private void testPanel(VerticalLayout lay) {

        ThemeResource folderIconSmall = new ThemeResource("../runo/icons/16/folder.png");
        Tree t = new Tree();
        t.setImmediate(true);

        t.addItem("abc");
        t.addItem("abcde");
        t.addItem("abcdef");
        t.addItem("abcdefgh");
        t.addItem("abcdefghijk");
        t.addItem("abcdefghijklmn");

        String first = "abcdefghijklmnop";
        String second = "abcdefghijklmnopqrst";
        t.addItem(first);
        t.addItem(second);
        t.setParent(second, first);
        t.setItemIcon(first, folderIconSmall) ;//comment out

        HorizontalLayout hlay = new HorizontalLayout();
        hlay.setStyleName(Reindeer.LAYOUT_BLUE);
        hlay.addComponent(t);
        hlay.setWidth(-1,Sizeable.UNITS_PIXELS);

        Panel p = new Panel();
        p.setHeight("400px");
        p.setWidth("120px");
        p.setContent(hlay);

        lay.addComponent(p);
    }


Is there any way around this ?
11610.png
11611.png

bump

why don’t you set the horizontalLayout size full? That way, the letters is not cut off.

hlay.setWidth(“100%”);

Hope that helps.

Thanks John.

However what you suggested would work except that when the text is longer and overflows the horizontalLayout it becomes hidden.

If you look through the attached firebug, you should see that both the caption text and icon are in the same div (.v-tree-node-caption), hence the problem. So we get different result for different icon sizes, as shown.

Maybe a separate div for icons with calculate width should be included something like ( .v-tree-node-icon )


    private void testPanel(VerticalLayout lay) {



        ThemeResource folderIconSmall = new ThemeResource(
                "../runo/icons/16/folder.png");

        ThemeResource folderIconSmall32 = new ThemeResource(
        "../runo/icons/32/folder.png");

        Tree t = new Tree();
        t.setImmediate(true);



        String first =  "abcdefghijklmnopqrstuvwxyz1";
        String second = "abcdefghijklmnopqrstuvwxyz2";
        t.addItem(first);
        t.addItem(second);
        t.setItemIcon(first, folderIconSmall);
        t.setItemIcon(second, folderIconSmall32);

        HorizontalLayout hlay = new HorizontalLayout();
        hlay.setStyleName(Reindeer.LAYOUT_BLUE);
        hlay.addComponent(t);
        hlay.setWidth(100, Sizeable.UNITS_PERCENTAGE);
//        hlay.setWidth(-1,Sizeable.UNITS_PIXELS);

        Panel p = new Panel();
        p.setHeight("400px");
        p.setWidth("180px");
        p.setContent(hlay);

        lay.addComponent(p);

        lay.setWidth("200px");
        lay.setHeight("500px");
        lay.setStyleName(Reindeer.LAYOUT_BLACK);


    }

11613.png
11614.png

Any Luck on this problem, I am also interested in the solution for this problem.

Hope the legendary vaadin forum will address this.

Hi,

This is definitely a bug in Vaadin. Most likely a related (or identical) issue is already documented in our Trac:
#3529 - Height of tree with icons of differen sizes is calculated wrongly

I added this forum post as reference to the ticket.

You should try the latest 6.5 nightly build