+ Start a Discussion
Srini GrandhiSrini Grandhi 

how to wrap text in lightning tree?

Is there a way to wrap text in lightning tree?
Best Answer chosen by Srini Grandhi
Ajay K DubediAjay K Dubedi
Hi Srini,

Lightning:tree component uses two slds classes you just have to over-ride them.
Please go through folowing sample code:

Component:
 
<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="items" type="Object" access="PRIVATE"/>

    <lightning:tree items="{! v.items }" header="Roles"/>
</aura:component>

Controller:
 
({
    init: function (cmp) {
        var items = [{
            "label": "Western Sales Director",
            "name": "1",
            "expanded": true,
            "items": [{
                "label": "Western Sales Manager",
                "name": "2",
                "expanded": true,
                "items" :[{
                    "label": "CA Sales Rep",
                    "name": "3",
                    "expanded": true,
                    "items" :[]
                }, {
                    "label": "OR Sales Rep",
                    "name": "4",
                    "expanded": true,
                    "items" :[]
                }]
            }]
        }, {
            "label": "Eastern Sales Director",
            "name": "5",
            "expanded": false,
            "items": [{
                "label": "Easter Sales Manager",
                "name": "6",
                "expanded": true,
                "items" :[{
                    "label": "NY Sales Rep",
                    "name": "7",
                    "expanded": true,
                    "items" :[]
                }, {
                    "label": "MA Sales Rep",
                    "name": "8",
                    "expanded": true,
                    "items" :[]
                }]
            }]
        }, {
            "label": "International Sales Director",
            "name": "9",
            "expanded": true,
            "items": [{
                "label": "Asia Sales Manager",
                "name": "10",
                "expanded": true,
                "items" :[{
                    "label": "Sales Rep1",
                    "name": "11",
                    "expanded": true,
                    "items" :[]
                }, {
                    "label": "Sales Rep2",
                    "name": "12",
                    "expanded": true,
                    "items" :[]
                }]
            }, {
                "label": "Europe Sales Manager",
                "name": "13",
                "expanded": false,
                "items" :[{
                    "label": "Sales Rep1",
                    "name": "14",
                    "expanded": true,
                    "items" :[]
                }, {
                    "label": "Sales Rep2",
                    "name": "15",
                    "expanded": true,
                    "items" :[]
                }]
            }]
        }];
        cmp.set('v.items', items);
    }
});

STYLE:
 
.THIS {
    
}

.THIS .slds-tree__item-label{
    width: 30px;
}

.THIS .slds-truncate{
    overflow: unset;
    white-space: unset;  
}

This will solve your problem for width of 30px.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi

All Answers

Ajay K DubediAjay K Dubedi
Hi Srini,

Lightning:tree component uses two slds classes you just have to over-ride them.
Please go through folowing sample code:

Component:
 
<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="items" type="Object" access="PRIVATE"/>

    <lightning:tree items="{! v.items }" header="Roles"/>
</aura:component>

Controller:
 
({
    init: function (cmp) {
        var items = [{
            "label": "Western Sales Director",
            "name": "1",
            "expanded": true,
            "items": [{
                "label": "Western Sales Manager",
                "name": "2",
                "expanded": true,
                "items" :[{
                    "label": "CA Sales Rep",
                    "name": "3",
                    "expanded": true,
                    "items" :[]
                }, {
                    "label": "OR Sales Rep",
                    "name": "4",
                    "expanded": true,
                    "items" :[]
                }]
            }]
        }, {
            "label": "Eastern Sales Director",
            "name": "5",
            "expanded": false,
            "items": [{
                "label": "Easter Sales Manager",
                "name": "6",
                "expanded": true,
                "items" :[{
                    "label": "NY Sales Rep",
                    "name": "7",
                    "expanded": true,
                    "items" :[]
                }, {
                    "label": "MA Sales Rep",
                    "name": "8",
                    "expanded": true,
                    "items" :[]
                }]
            }]
        }, {
            "label": "International Sales Director",
            "name": "9",
            "expanded": true,
            "items": [{
                "label": "Asia Sales Manager",
                "name": "10",
                "expanded": true,
                "items" :[{
                    "label": "Sales Rep1",
                    "name": "11",
                    "expanded": true,
                    "items" :[]
                }, {
                    "label": "Sales Rep2",
                    "name": "12",
                    "expanded": true,
                    "items" :[]
                }]
            }, {
                "label": "Europe Sales Manager",
                "name": "13",
                "expanded": false,
                "items" :[{
                    "label": "Sales Rep1",
                    "name": "14",
                    "expanded": true,
                    "items" :[]
                }, {
                    "label": "Sales Rep2",
                    "name": "15",
                    "expanded": true,
                    "items" :[]
                }]
            }]
        }];
        cmp.set('v.items', items);
    }
});

STYLE:
 
.THIS {
    
}

.THIS .slds-tree__item-label{
    width: 30px;
}

.THIS .slds-truncate{
    overflow: unset;
    white-space: unset;  
}

This will solve your problem for width of 30px.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
This was selected as the best answer
Srini GrandhiSrini Grandhi
Thanks Ajay. That works like a charm.