search

fredguile / ng2-md-datatable

Angular 5+ DataTable component for using with Material Design 2
https://www.npmjs.com/package/ng2-md-datatable
MIT License
38 stars 13 forks source link

The padding introduced in 1.1.0 breaks responsiveness of the datatable #14

Closed fredguile closed 7 years ago

fredguile commented 7 years ago

Picture explanation: screen shot 2017-03-22 at 14 17 00

To let you know @TitanNano, I need to sort this out and change these paddings for a proper flexbox with gutter strategy...

fredguile commented 7 years ago

I unfortunately can't spend more time on this, so I have to restrict padding in 1.1.1 and let people override that in their own scss theme if they need to.

TitanNano commented 7 years ago

@fredguile the spec says for this case the table should be vertically scrolled. I can apply this if you like.

TitanNano commented 7 years ago

@fredguile https://github.com/fredguile/ng2-md-datatable/blob/afd12382c2edbb3432d4abe637a273ecd2ff83a6/src/md-datatable.component.scss#L1-L3 the fix actually has already been applied. It might be possible that you didn't limit the with of the table in your example above.

fredguile commented 7 years ago

I'll leave it with this compromise for now...

My bad, I realise that using "display: table", "display: table-header-group", (and so on.. wasn't so efficient for making a responsive table with dynamic padding.

Switching to a flex layout with gutters calculated with the CSS calc() would probably work better, but it would take time to refactor this.