Components: data-table styling, incorrect styling if cdk-cell use static width

Created on 17 Dec 2017 · 11Comments · Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

if cells has static width, scrolling appears and all content inside should have same styles.

What is the current behavior?

if cells has static width, scrolling appears and all content that out of view has no correct styles.

What are the steps to reproduce?

view: https://angular-g5gfng-yw7aey.stackblitz.io/
editor: https://stackblitz.com/edit/angular-g5gfng-yw7aey
Just scroll horizontally and you'll see that styles are broken.

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

I'm using app where i need dynamically change displayed columns, so when i show all columns on mobile this issue appears

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

angular: 5+,
material: 5+,
os: windows, ios
browser: chrome, IE11 - EDGE
TypeScript: doesn't matter

Is there anything else we should know?

nope

Thank you

Source

djleonskennedy

👍2

Most helpful comment

.example-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  overflow: auto; /*<-*/
}

.example-table {
  flex: 1 1 auto;
  /* overflow: auto; */ /*<-*/
  max-height: 500px;
  display: table; /*<-*/
}

todoubaba on 19 Dec 2017

👍4 ❤1 🎉1

All 11 comments

.example-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  overflow: auto; /*<-*/
}

.example-table {
  flex: 1 1 auto;
  /* overflow: auto; */ /*<-*/
  max-height: 500px;
  display: table; /*<-*/
}

todoubaba on 19 Dec 2017

👍4 ❤1 🎉1

@andrewseguin Hello, any updates about this issue ?

djleonskennedy on 22 Feb 2018

@todoubaba Thanks. It works. The key for my table was display:table !important on the .mat-table, and a separate container for overflow: auto;

Column width for my app was limited as such:

    .mat-header-cell, > .mat-cell {
      padding: 0 5px;
      min-width: 100px;
    }

Now, I have dynamic columns that do not break styling when overflow scrolling.

kamok on 8 Mar 2018

👍1

@kamok i did exactly what you did. but adding display: table breaks the scroll and display all the content.
and also don't see the table line rendered correctly.
could you share a working complete code? thank you