Components: [Table] Horizontal overflow not rendering correctly

[emilol]

Bug

mat-table overflow not rendering correctly

similar to to #7404 but does not involve min-widths

What is the expected behavior?

When the content of a column is too wide to be shown, horizontal scrolling to bring those columns into view should show consistent styling.

e.g. a table with a chip list that is set not to wrap will overflow when there are more chips than horizontal space.

What is the current behavior?

When remainder of the column is scrolled into view there is no white background or row borders.

What are the steps to reproduce?

https://plnkr.co/edit/Jkxy52Wcjwvn0LhyowSx?p=preview

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

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

up to date angular and material, all browsers

Is there anything else we should know?

[andrewseguin]

Thanks for this issue @emilol, this is something we want to make easier for users. Something to keep in mind is that unlike the case with native tables, this table's cells cannot determine the width of the row or table. It must be done programatically, which is something we can resolve with a directive or param to the columns (e.g. mat-column-autosize).

To resolve this issue in the meantime, add a bit of implementation that auto-sizes your columns. After the table's view is initialized, run through each chip cell and find the widest one. Once you have that, set each row's min-width to that value. Set overflow: auto on the .mat-table class and voilà!

Here's a small plunker implementation that you can use to play with and see it in action: https://plnkr.co/edit/htuiga6zOTq2m2I2uSTV?p=preview

[emilol]

Thanks for the plunker @andrewseguin, the workaround should take care of the scenario we have. If we wanted the table not set to overflow: auto though, I'm thinking we would need a similar directive on the table itself?

[andrewseguin]

Fixed in #10594 - use a native <table> for better horizontal support

[HDaghash]

Guys this is will help you solving such issues
You have to start using : width: max-content; 🥇

.mat-row,
.mat-header-row {
  min-width: 1123px;
  width: 100%;
  width: max-content;
}

.mat-table {
  overflow: scroll;
  max-height: 500px;
}

.mat-cell,
.mat-header-cell {
  min-width: 90px;
}
/*unnecessary to make table header fixed*/
.mat-header-row {
  top: 0;
  position: sticky;
  z-index: 1;
  background-color: inherit;
  text-align: center;
}

find browsers support : https://caniuse.com/#search=fit-content

[thapld]

Best resolve I did overcome this problem.

1. Hold dynamic data column with css

columns = [
        {
            columnDef: 'description',
            width: 350,
            flex: '0 0 350px',
            default: false,
            sticky: false,
            stickyEnd: false,
            header: 'Description',
            sort: true,
            cell: (element: ResourceModel) => element.description
        },
        ...........
]

1. Recalculate css min width if you implement a show/hide function

recalculateCss() {
    let cellWidth = 0;
    for (let i = 0; i < this.selected.length; i++) {
        const cell = this.selected[i];
        const column = this.columns.filter((value, index) => value.columnDef === cell);
        cellWidth += column[0] ? column[0].width : 0;
    }
    this.minWidth = cellWidth;
}

1. Add css in both mat-header-row and mat-row

[style.min-width.px]="minWidth"

[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._}