Problem with too long labels

[gbastien]

Hi,

we are using fancytree 2.2.0 for one of our project, it displays list of elements, the "problem" is that the label is displayed on one line and in case the label is very long, an horizontal scroll is displayed.

It is not a big issue but we managed to correct this by changing :

/* instead of 'no-wrap' */
ul.ui-fancytree.fancytree-container {
white-space: normal;
}
span.fancytree-node {
display: flex;
}

The problem is the use of "display:flex" that does not work on older browsers...
With IE8, here is the result :

So I do not know if it is an issue to you, and if so, is there a way to correct this so it works also with older browsers?

Thank you!

Gauthier

[mar10]

Yes, we should find a solution here, thanks for reporting this!

I updated the sample: http://www.wwwendt.de/tech/fancytree/demo/sample-multiline.html and tried this CSS, which looks good in IE, FF, and Chrome except that the title is too wide::

    span.ws-wrap span.fancytree-title {
        white-space: normal;
    }

This variant looks perfect on Firefox, but is not indented on IE & Chrome:

    span.fancytree-node {
        -moz-display: flex;
        -webkit-display: flex;
        -ms-display: flex;
        display: flex;
    }
    span.ws-wrap span.fancytree-title {
        white-space: normal;
    }

Finally, this variant breaks on all 3 browsers:

    span.ws-wrap span.fancytree-title {
        white-space: normal;
        -moz-display: flex;
        -webkit-display: flex;
        -ms-display: flex;
        display: flex;
    }

any thoughts?

[gbastien]

Hi,

thank you to consider this ;-)

We should ask some CSS expert about this, I have some under the hand here, I will see with them and come back to you when I found a reasonable solution.

Gauthier

[mar10]

cool :-)

[gbastien]

Hi @mar10

a CSS worker had finally time to look at this here, here is the result, use padding instead of white-space...

ul.fancytree-container {
font-family: tahoma,arial,helvetica;
font-size: 10pt;
white-space: nowrap;
}

.fancytree-title > p {
padding-left: 2.3em;
}

.fancytree-title > h3 {
margin-top: 0;
padding-left: 2.8em;
}

What do you think of this?

Gauthier

[mar10]

Hi,

thanks for your efforts!

Requiring a <p> element for wrapped text is a good idea.
I tried your CSS in the sample (http://www.wwwendt.de/tech/fancytree/demo/sample-multiline.html), but I did not get the expected results (currently only tested on Mac/Safari).

This may be because I recently changed the css a bit, in order to implement the ext-wide extension.
The former skin-win8 was modified, so that only the title span is highlighted (instead of the whole node span). This is required, because ext-wide stretches the title tag to get 100% width.
The former skin was renamed to skin-win8-n

Could you post the CSS that works for you in sample-multiline.html?

[twotribes]

Hi,

we basically ran into the same issue when using version 2.7.0 and the skin lion theme, i.e. a small container overflow like in the image from an earlier post in this thread:

But this also happened for single line nodes.

Upon further analysis, I found the root cause and developed a fix as a CSS override because we didn't want to go into fancytree's source code.

The container overflow is caused by the current strategy of aligning the node's contents horizontally. This will inevitably make the node's title element assume the full width of its container but pushed outwards by the expander and icon element in front of it.

While this could be fixed by assigning a dynamic width to the title element (e.g. width: calc(100% - [width of preceding icons]), this CSS property doesn't work in IE9 and IE8 (see: http://caniuse.com/#search=calc )

Therefore I modified the layout strategy for the node's children by using absolute positioning for the icons and making room for them within the title element via padding-left.

This override looks like this and is proven to work flawlessly with all browsers incl. IE8+:

span.fancytree-node {
position: relative;
}

span.fancytree-expander {
display: block;
position: absolute;
left: 0;
top: 0;
}

span.fancytree-icon {
margin-left: 0;
display: block;
position: absolute;
left: 19px;
top: 0;
}

span.fancytree-title {
padding-left: 41px;
margin-left: 0;
}

Of course this fix might not be perfect for other themes or features we aren't using in our application (a huge global extranet ordering system for a multi-billion $ company). But I think the different layout strategy is worth considering as it works with single and multi lines as well.

[mar10]

thanks for sharing this.
Your suggestion is similar to the current ext-wide implementation. I will look into it once again, when I find time...

[cksachdev]

Is there a solution to word wrapping in latest version of fancytree?

[cksachdev]

@mar10 When I shrink the browser, ext-wide isn't doing the wordwrap for the title.

Here is another screenshow from wordwrap example:

[cksachdev]

Figured out a workaround for now to address it. Here is my renderNode function

renderNode: function(event, data) {
    var node = data.node;
    if (node.data) {
        var $span = $(node.span);
        $span.find("span.fancytree-title").text(node.title).css({
            "white-space": "normal",
            "margin": "0 30px 0 5px"
        });
    }
}

[mar10]

thanks

[kieranmathieson]

For me, this CSS rule let titles wrap:

span.fancytree-title { white-space: normal; }

Don't know whether it will work for others.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.