Angular 2 Material Horizontal scroll Data table Border issue

Question

I am using Angular Material Data table in my application. I need to display multiple columns with a horizontal scroll table. I am facing an issue with the table row border. It's not displaying an entire width of the row. Please check the attached image for your reference. Please help me to resolve this issue.

Please check the Link for Code reference

https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html

Thanks in Advance.

Please post your code. It is not possible to debug a problem with just a screen capture. — G. Tranter, Mar 13 '18 at 20:14
It is related to your table and row max-width settings and your cell min-width settings. I hope that helps. I'm not able to dig any deeper right now. — G. Tranter, Mar 13 '18 at 21:32
you will find workable example here. [https://stackoverflow.com/questions/50824617/angular-material-table-sizing-scroll/58957768#58957768][1] — Muhammad Sohail, Nov 20 '19 at 15:24

score 2 · Answer 1 · answered Jul 09 '18 at 15:46

2

Both header row and column rows are display flex by default, changing it to display inline-flex will fix above issue

.mat-header-row, .mat-row {
    display: inline-flex;
}

answered Jul 09 '18 at 15:46

vittaljk

21
4

please refer link below for more details https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – vittaljk Jul 09 '18 at 15:49
2

I have to add `min-width: 100%;` otherwise the columns are misaligned – Pascal Dec 28 '18 at 12:10

score 1 · Answer 2 · answered Jul 12 '18 at 07:39

1

Use display grid in case of ipad and mobile device screens

mat-table {
   display: -ms-grid ;
   display: grid;
}

answered Jul 12 '18 at 07:39

Aditya Tomar

11
2

score 1 · Answer 3 · answered Oct 19 '18 at 17:52

This might help someone else as this is an old post. Please refer to https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css

Just add the following to your your-comp-component.css or your-comp-component.scss

.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}

score 1 · Answer 4 · edited Oct 28 '18 at 16:10

Best resolve I did overcome this problem.

Hold dynamic data column with css

columns = [
        {columnDef: 'select', width: 75},
        ...........
]

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;
}

Add css in both mat-header-row and mat-row
```
[style.min-width.px]="minWidth"
```

jnathn · Answer 5 · 2018-03-14T15:05:29.687

0

~~Material uses a flex layout so you could add align-self: stretch; to the columns CSS. This should stretch the auto-sized items to fit the table.~~

Edit

Stackblitz

Removing your header and cell width element helps. You want to set your rows to have a 100% width then set a desired minimum.

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

edited Mar 14 '18 at 15:05

answered Mar 13 '18 at 20:16

jnathn

28
3

Please add some of your CSS. – jnathn Mar 13 '18 at 20:22
Added link above. Please check. Help me on this – Hariharan Subramanian Mar 13 '18 at 20:53
Updated answer. – jnathn Mar 14 '18 at 18:33

score 0 · Answer 6 · answered Mar 14 '18 at 14:05

You have style properties that are working against each other. You've set min-width: 150px; for each column, and you have 13 columns which totals 1950px. Plus you've set width: 1123px; on each row which is (obviously) less than 1950px. Also, you set max-width: 1123px; - same width as your rows - on the table itself, but the table needs to be wider than the row in order to show the scrollbar. If you fix those problems, the border will display properly. Try setting just your row width and leaving out the table and column widths settings.

score 0 · Answer 7 · answered Apr 18 '18 at 17:48

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

Carlos Cuesta · Answer 8 · 2018-04-23T17:10:37.883

0

You need to set the expected with of the table in mat-table{min-width} plus the mat-row left and right paddings (24px each).

In your example case:

.mat-table {
  min-width: calc((13 * 150px) + 48px);
}

or

.mat-table {
  min-width: 1998px;
}

Hope this helps!!!

edited Apr 23 '18 at 17:10

answered Apr 23 '18 at 16:39

Carlos Cuesta

1,262
1
17
20

score 0 · Answer 9 · edited Aug 20 '20 at 07:08

0

Try to use below styling. It helps to render data & borders correctly when more columns in mat-table. (horizontal scrolling issue resolved)

.mat-header-cell{
    background-color: inherit;
}

edited Aug 20 '20 at 07:08

Jason

2,493
2
27
27

answered Aug 19 '20 at 17:07

Manoj Golla

1
1

Angular 2 Material Horizontal scroll Data table Border issue

9 Answers9