CODEWITHSUNDEEP
jquerycsstwitter-bootstrapinternet-explorerdatatables
Ankan Kumar Giri
Ankan Kumar Giri

Reputation: 253

Jquery Datatable inside bootstrap d-flex is overflowing parent in internet explorer

Datatable renders outside or overflows from the parent with d-flex class only in Internet Explorer.

<div class="d-flex justify-content-center">
    <div class="card">
        <div class="card-header">HEADER</div>
        <div class="card-block">
          JQUERY DATATABLE
        </div>
    </div>
</div>

Here is the JSFiddle for this problem https://jsfiddle.net/q9L2L6dz/

Upvotes: 1

Views: 1148

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

This is a reported issue and you may take a look here.

A way to fix it is to set a fixed width to your row. Change this line:

<div class="row" style="padding-top:5px; padding-bottom:15px;">

to:

<div class="row" style="padding-top:5px; padding-bottom:15px;width: 900px;">

Of course, you need to use media queries instead of a static value like 900px.

Your updated fiddle

Upvotes: 1

Related Questions