Datatables breaks out of Bootstrap layout - but in Firefox only, and only when I insert rows...

glawrie

I have a datatable instance within a Bootstrap 3 page.

I am using the latest version of datatables via CDN with bootstrap and responsive options selected (https://cdn.datatables.net/t/bs/dt-1.10.11,r-2.0.2/datatables.min.css / https://cdn.datatables.net/t/bs/dt-1.10.11,r-2.0.2/datatables.min.js)

The table provides a simple list of data with the option to 'open' rows to get more data (based on the Child Rows example table - http://www.datatables.net/examples/api/row_details.html).

The table is situated within a page laid out using the Bootstrap framework - specifically it sits within a col-md-9 div.

The table itself works fine and renders properly in all browsers provided the child rows are not opened - the table fits within the col-md-9 div, and column widths change as the page width is changed.

When a child row is opened, additional content is added to the table row created. This additional content takes the form of a simple Bootstrap div layout to give formatting to the added content.

The table with a child row opened renders properly in Chrome, Safari, Opera, Edge. The new content is laid out using the Bootstrap formatting instructions, but fits within the parent bootstrap div (i.e. all the content is fitted into the existing table width).

When the table with child rows is opened using Firefox (44.0.2) the whole table bursts out of the Bootstrap Div it sits within.

You can see this effect at this page - http://2GC.eu/resources/software-database

If you open the page in Firefox and open the 'inspector' after expanding a row you can see that the data table has burst out of the containing div - it seems to be stretching to accommodate the width of the inserted text assuming no formatting is applied.

A similar test using another kind of browser shows this bursting out behaviour not happening.

I am not sure what is causing this problem - there does not appear to be anything defective in the HTML involved.

A less complicated page of similar design does not show these problems - http://2GC.eu/resources/weblinks

I am sure I'm doing something daft that is causing this problem, but cannot work out what...

I would be grateful for any thoughts anyone has about what is going on and how I can fix.