Answers

• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  October 2020 Answer ✓

  You can put it into a container class div or something else that you like. For example:
  https://jsfiddle.net/qha0nL54/

  Kevin
• tineyes Posts: 3Questions: 1Answers: 0

  October 2020

  Thanks. I assume you meant bootstrap container classes. Apparently it solves the problem. But I still feel there is bug in datatable implementation. In my first example, the table was going wider than the page. When using container, it might go wider than the parent div (especially in smaller viewports).
  I would request developers to investigate the issue further.
• allan Posts: 63,494Questions: 1Answers: 10,470 Site admin

  October 2020 Answer ✓

  As always Kevin is absolutely spot on. The is caused by the way Bootstrap grids and containers work. From their docs:

  Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

  Which is exactly what is happening in your example. The div.row has a margin left/right of -15px, which is what is causing the overflow of the document horizontally.

  You can see that effect without DataTables - here is a little example which shows the effect without DataTables.

  That's just the way Bootstrap works.

  Allan
• tineyes Posts: 3Questions: 1Answers: 0

  November 2020

  Great explanation. I suggest updating your bs4 example with a container div.