DataTables extending beyond div wrapper in Safari Browsers
DataTables extending beyond div wrapper in Safari Browsers
I'm having a problem with datatables in Safari only. On one of the pages that I am using DataTables I have 3 jQuery tabs, each with their own DataTable. For some reason the tables are extending beyond the div that wrappers around them. In Safari when I right click and then click "Inspect Element", I've found a couple things.
1. If I hover over one of the tables(that is using the datatables api) a box appears with a tan background saying "table.e-grid1 [1993 x 87]"
2. Under the "Computed Style" tab in the right-hand pane of the Inspect Element tool in Safari it states width: 1992px;
3. Under the "Properties" tab in the right-hand pane of the Inspect Element tool in Safari under the first "HTML TableElement" it has 2 width elements that seem off to me: clientWidth: 1992 and offsetWidth: 1993
The monitor that I am viewing this on has a resolution of 1920 x 1080. So the width are clearly outside the viewing area of my screen. The divs that contain these tables have set widths, borders, and padding, so you would think the table would stay with the div but they do not. The div they are contained in do not adjust to contain the table, the table actually overlaps the div border.
I have tried to set the table width every way I can think of, and this is only doing this in Safari. The same page works fine in FireFox, IE, Chrome, etc...
Any suggestions or advice would be greatly appreciated!
1. If I hover over one of the tables(that is using the datatables api) a box appears with a tan background saying "table.e-grid1 [1993 x 87]"
2. Under the "Computed Style" tab in the right-hand pane of the Inspect Element tool in Safari it states width: 1992px;
3. Under the "Properties" tab in the right-hand pane of the Inspect Element tool in Safari under the first "HTML TableElement" it has 2 width elements that seem off to me: clientWidth: 1992 and offsetWidth: 1993
The monitor that I am viewing this on has a resolution of 1920 x 1080. So the width are clearly outside the viewing area of my screen. The divs that contain these tables have set widths, borders, and padding, so you would think the table would stay with the div but they do not. The div they are contained in do not adjust to contain the table, the table actually overlaps the div border.
I have tried to set the table width every way I can think of, and this is only doing this in Safari. The same page works fine in FireFox, IE, Chrome, etc...
Any suggestions or advice would be greatly appreciated!
This discussion has been closed.