New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tree component nodes not indented under Lightning Components CSS #91

pfronczak opened this Issue Nov 5, 2015 · 8 comments


None yet
7 participants

pfronczak commented Nov 5, 2015

There seems to be a problem with indenting tree nodes when the Lightning Components CSS (salesforce-lightning-design-system-ltng.css) is used.
I've put the sample tree component into a Lightning application and this is the result:
Lightning CSS tree
By contrast, only changing the CSS to salesforce-lightning-design-system.css for the same markup results in correct layout:
Regular CSS tree.

I'm using version 0.11.0 of the design system with the latest Chrome (46.0).


This comment has been minimized.


stefsullrew commented Nov 6, 2015

Hi @pfronczak - do you have any other resets or CSS that could be affecting it? I'm guessing it's a bug in the scoped file, but if you could inspect to see what's wiping that indention out, it would be helpful in fixing it. Cheers!


This comment has been minimized.

pfronczak commented Nov 6, 2015


I don't have any other resets or CSSs - it's a pure SLDS setup.
It looks like the .slds class is used incorrectly in the scoped CSS. For example, this is what seems to be indenting the second-level tree branches in the primary CSS:

.slds-nested .slds-tree__branch > .slds-tree__item {
  padding-left: 2.5rem;

And this is the equivalent rule in the scoped CSS:

.slds-nested .slds .slds-tree__branch > .slds .slds-tree__item {
    padding-left: 2.5rem;

The order of the classes doesn't seem right - the element with .slds-nested will always be inside .slds element and not other way round. Also the .slds class on the right-hand side of the rule seems invalid - the tree item will not be nested in another .slds container.

Hope this will help you get to the bottom if this.


jina added a commit that referenced this issue Nov 18, 2015


This comment has been minimized.

bibinsha commented Jan 27, 2016

Same issue here.
I have checked it & It is working perfectly for all the SLDS packages prior to version 0.10.1.
But when you start using SLDS version 0.11.0 or later then this issue is popped out.

@rickschmoo rickschmoo added this to the 02/16 milestone Feb 4, 2016

@kaelig kaelig closed this Mar 11, 2016


This comment has been minimized.

mattgoldspink commented Mar 11, 2016

We have this issue when using the salesforce-lightning-design-system-vf.min.css files in v1.0.0

I'm trying to find the fix for this - I see it was closed only 14 hours ago, but I don't see any commits in any of the branches, so I'm wondering if it's was closed accidentally or the fix is in a private branch?


This comment has been minimized.

ennoucas commented Mar 14, 2016

+1 ! Don't see any fix for this.

@kaelig kaelig reopened this Mar 14, 2016


This comment has been minimized.

ennoucas commented Mar 14, 2016

Merci @kaelig :)


This comment has been minimized.


kaelig commented Mar 14, 2016

Thank you for noticing this. The issue was closed accidentally via our private repository in which we applied the fix. Stay tuned...


This comment has been minimized.


kaelig commented Apr 9, 2016

Thank you for your patience, this was just fixed in the latest version of the Lightning Design System!

See full release notes:

@kaelig kaelig closed this Apr 9, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment