0

Was wondering if anyone has any ideas on the actual CSS that lies behind the slds-grid_container (actually wondering on the slds-tree_container class which is on the Lightning:tree component). I am looking to override it in CSS (can't remove it) so it spans the width of my component.

I've already stopped the text from Truncating by adding the class to Lightning:tree and then allowing overflow but looking for a way to stop the container from limiting the on selection styling from truncating as well for a lack of a better word

In Component

<lightning:tree items="{! v.items }" class="slds-tree_container slds-truncate"/>

In the style sheet

.THIS .slds-truncate {

    overflow:  visible !important;

}

.THIS .slds-tree_container {

  width: 100% !important;

}

Example of the on selection styling being cutoff

enter image description here

Width did not seem to work

0

CSS overriding is something that's going away. It was never really fully supported to begin with, by design. You'll need to find a way to use existing slds classes (slds-size should help), rather than try to force a component to have overridden styles. Developers should not need to know how the CSS is designed internally. As long as the component takes on the correct width, everything inside of it should react accordingly.

  • 1
    So essentially override the inherited CSS of the lightning component by adding additional classes? I guess i disagree with taking CSS override away but sure there are complications i am not thinking of. Max-Width was the style instead of width and that worked in case anyone was wondering – Bobbygllh Apr 3 at 12:06
  • 1
    @Bobbygllh You'll want to read about the shadow dom. While developers will be able to do things to components as a whole, reaching inside of it by way of overrides (as in your original question) won't be allowed. – sfdcfox Apr 3 at 13:47
0

Max-width was the CSS that worked here, not width

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.