1

I want to increase the min-width of the slds-tree_container as the text gets wrapped beyond a certain width.

Tree.html

  <template>
         <lightning-tree items={roleItems} class="" onselect={handleSelect} >
         </lightning-tree>
 </template>

enter image description here

Because of the new Shadow DOM styling in LWC I can't change the CCS style of the inner components (In this case slds-tree_container). Is there a way to set auto width ?

1 Answer 1

5

Normally for a web component, this would work

const treeElement = this.template.querySelector("lightning-tree");
let style = document.createElement("style");
style.innerHTML = ".slds-tree_container { min-width: 800px; }";
treeElement.shadowRoot.appendChild(style);

but because of lightning locker service accessing shadow dom is not allowed(which is a good thing) .

I would recommend extending the base component from here https://github.com/salesforce/base-components-recipes/tree/master/force-app/main/default/lwc/tree and adding custom css as needed

1
  • Thanks. This method works. Although I have seen in few places discouraging to do so in LWC.
    – Brav
    Commented Feb 28, 2020 at 20:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .