Components: mat-cell:first-child for mat-table suddenly has 24px left padding which it didn't have before

[crowmagnumb]

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

mat-cell:first-child for mat-table suddenly has 24px left padding which it didn't have in earlier material versions all the way up to at least @6.0.0.beta.4.

I would expect no default left padding as before.

What is the current behavior?

With the upgrade to version 6.0.1 I now have the following css...

mat-cell:first-child,
mat-footer-cell:first-child,
mat-header-cell:first-child {
    padding-left: 24px;
}

which messes up the alignment of all my tables.

I have to now supply this override in my global css.

mat-cell:first-child,
mat-footer-cell:first-child,
mat-header-cell:first-child {
    padding-left: 0px !important;
}

What are the steps to reproduce?

None needed.

What is the use-case or motivation for changing an existing behavior?

That is my question to you. :)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

material 6.0.1

Is there anything else we should know?

[andrewseguin]

Previously the padding was applied to the mat-row but as we changed the table to support the native <table> element, we realized that native rows don't actually have a layout that can be padded. We wanted to align the two styles so we chose to put the padding on the first and last cells rather than the row itself.

This also helps us get prepared for sticky columns, which did not play nice with a padded row.

[adripanico]

The problem comes when you hide some columns according to browser size. For example (using Bootstrap display utilities), if the following one is the definition of the first column to be displayed:

<ng-container matColumnDef="accountName">
    <mat-header-cell *matHeaderCellDef class="d-none d-lg-flex"> Account </mat-header-cell>
    <mat-cell *matCellDef="let item" class="d-none d-lg-flex">{{ item.accountName }}</mat-cell>
</ng-container>

, it will disappear on viewports lower than 992px width, moving the second column to the first place and removing the corresponding padding.

The real problem is that the column is still there in the DOM, but since it is empty is not taking any space, neither the corresponding to the padding.

I could control the browser size changes from the controller and then modify the array with the displayed columns, but I don't like to control responsiveness from the controller as I think this is a completely view-related issue.

[adripanico]

I've finally changed the styles to revert the situation, so I have these (SCSS):

.mat-table {
  mat-row, mat-header-row, mat-footer-row {
    padding-left: 24px;
    padding-right: 24px;
  }

  mat-cell:first-child, mat-footer-cell:first-child, mat-header-cell:first-child {
    padding-left: 0;
  }

  mat-cell:last-child, mat-footer-cell:last-child, mat-header-cell:last-child {
    padding-right: 0;
  }
}

This way I can hide the first or last column and the padding remains.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}