Skip to content
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

Data table: th padding removed in slds-table--fixed-layout with Spring '17? #396

Closed
stephenscholtz opened this Issue Feb 15, 2017 · 2 comments

Comments

Projects
None yet
3 participants
@stephenscholtz
Copy link

stephenscholtz commented Feb 15, 2017

Hi there,

I have a lightning component I built using the data table element. The lightning component is currently being served through a VF page with Lightning Out

When my sandboxes were upgraded Spring '17, I'm guessing the built-in LDS was upgraded too, because the header's in my data table suddenly looked different. The data table uses "slds-table--fixed-layout", and there is a line of CSS that seems to have been added which removes table header padding. Poking through _index.scss on the LDS site, we have...

.slds-table--fixed-layout {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;

  thead {
    background-color: $color-background-alt;

    th {
      padding: 0; // Due to HTML structure, need to reset the padding on all th elements in thead
    }
  }

The th padding: 0 seems new. (I looked in an old static resource copy of LDS and couldn't find an equivalent.)

Editing the HTML of the LDS site and applying the class, you end up with this formatting on the headers:

image

It didn't compress like that before. Maybe I was using slds-table--fixed-layout incorrectly, by itself, and maybe it's only supposed to be used with the addition of the resizable column markup? It can't be used on its own?

At any rate, wanted to point this out in case this was an unintended change, or others ran into it.

Work around this by adding some overrides in your CSS (examples provided are for use in a lightning component):

.THIS.slds-table.slds-table--fixed-layout thead th {
    padding: 0.5rem;
}
.THIS.slds-table.slds-table--cell-buffer tr>th:first-child {
    padding-left: 1.5rem;
}

Or remove .slds-table--fixed-layout from your table and apply your own fixed layout...

.THIS.slds-table {
    table-layout: fixed;
}

@kaelig kaelig added the bug label Feb 15, 2017

@kaelig

This comment has been minimized.

Copy link
Contributor

kaelig commented Feb 15, 2017

Thank you for confirming this, @stephenscholtz. We are aware that this change may appear as a regression to some customers and will provide a fix/workaround very soon.

@kaelig kaelig added bug and removed bug labels Feb 15, 2017

@ishakasliwal

This comment has been minimized.

Copy link
Contributor

ishakasliwal commented Mar 16, 2017

This should be fixed in v2.2.2, thank you again for reporting this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.