CODEWITHSUNDEEP
javascriptcssdatatablesresponsive
Chop
Chop

Reputation: 4559

Datatables Responsive in a flexbox hierarchy overflow in recent browsers

The problem

We use Datatables Responsive to display a table within a Bootstrap cell. It works fine. At least, we thought so, but lately discovered that, in later browsers, the table largely overflows the screen.

About the overflow: some columns are collapsed, but clearly not enough. We have some older versions of the code where columns are hidden when we drop below a threshold point (which is far after it should be). This is no longer the case but we had some radical changes (in both stylesheets and JavaScript) that code comparison flew out of the window.

To be precise:

We are in a corporate environment so we have limited choice in the browsers we have and this is all I can test.

The configuration

The datatables is set this way:

HMTL

<div id="some-ancestor-with-flexbox-styling">
    <div class="row">
        <div class="col-xs-12">
            <table id="my-table" style="width: 100%"></table>
        </div>
    </div>
</div>

JavaScript

$table.DataTable({
    language: {emptyTable: this.i18n.no_data},
    data: content,
    columns: columns,
    responsive: true
});

(I'm sorry, I cannot easily reproduce a case)

What I've tried

Go back to the basics

I removed as much as the options as I could from the configuration and see if the default Datatables configuration was better (spoiler alert: it was not). I also tried deactivating responsive but overflow still occurs.

I also moved the table as close to top-level as I could but that did not change anything.

We also wrote our own stylesheet but adding the original one doesn't change anything.

Tinker

After browsing all the possibly relevant solutions I saw on SO (div.table-responsive doesn't work and I already have the viewport <meta/>), I browsed the Datatables API and tinkered with some options we hadn't set yet (autoWidth, for instance).

I noticed no interesting change.

Listening

I added some listeners on Datatables events. Whether Responsive works or not, column-sizing is fired. In more modern browsers however, responsive-resize is not.

Check Chrome's changelog

I tried but only found a list of security fixes. Which is not what I need.

What next?

I've got no clue about how to solve this. Even if I don't get a solution, a new investigation lead would be great!

[Edit 2017-10-06] Clues

I'm still investigating, but moving the table around in the DOM, I found which element was the first to show problems. It had a display: flex; flex: 1 0 auto; style. Removing it fixed the problem.

I must now investigate with the full DOM tree but I'm afraid this is related to flexbox. This post on Datatables' forum seems to support this, but the proposed solution (add overflow: hidden to the table's parent) doesn't do the trick for me. Going on with my search.

Upvotes: 1

Views: 2051

Answers (3)

misanthrop
misanthrop

Reputation: 939

Adding min-width: 0; to the content class of my site solved this issue for me.

I got it from here: https://datatables.net/forums/discussion/46383/responsive-does-not-work-inside-flexbox

Upvotes: 1

Tofandel
Tofandel

Reputation: 3585

Add overflow: hidden to the closest flex element in the DOM hierarchy it should solve the issue

Upvotes: 0

Alexis
Alexis

Reputation: 5831

The flexbox display style can break jQuery DataTable rendering. You'll have to inspect all parents containers that have the display: flex property and temporarily disable the display type one by one to find which container is causing this issue.

I think flex-shrink:1 is a possible cause of your problem.

Upvotes: 2

Related Questions