tables_dynamic overflow in mobile (responsiveness issue)

[MedUnes]

There is a responsiveness issue at this page

As you can see in the screenshot below, the Datatables widget overflows the main content section

To reproduce this issue open this link either in a mobile device or in google chrome and then simulate a mobile device in the inspector (F12)

[krzysiekpiasecki]

I have recreated.

[mahmoud-nb]

The width of a table can not be less than the width of its columns, so the width of a column can not be less than its contents. so, In this case, no way to compress the table to take the width of the screen. I suggest adding a scroll for the div that contains tables

Try to add the "scrollable" class to the div.row that contains a table

.scrollable{ overflow:auto; }

[krzysiekpiasecki]

Sometimes hiding a columns is also a resolution.

[MedUnes]

@mahmoud-nb

.dataTables_wrapper > .row{
  overflow:auto !important; /*prevent datatables overflowing its container*/
}

solved the problem for me. I guess you can make a pull request for this.

[MedUnes]

This is a PR that should patch this issue.

https://github.com/puikinsh/gentelella/pull/359

[connectnbs]

You can simply add style="overflow:auto;" to solve this if you insist to keep all the rows. or check the resposive datatable in the Gentell Admin theme.

[AndreiCN]

Hello there, "overflow:atuo" will solve the problem yep, we'll add it in a future update.