Wrong `justify-content` in paginate and a couple general comments

[XhmikosR]

Hi, there.

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: flex-end; /* <-- this one */
}

The above is wrong, at least for small resolutions.

Ideally the paginate should be wrapped in a nav with proper aria-labels.

A couple of general comments:

• you are overqualifying your selectors; there's no need to do div.dataTables_wrapper div.dataTables_paginate ul.pagination for example. But I guess changing this would require a lot of changes because it's something done across the whole code base
• Bootstrap supports responsive tables out of the box (https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables); With v1.10.16 I could just wrap the table in a .table-responsive div as per our docs. But with v1.10.18, the table shows the horizontal overflow and I have to do this:

table.dataTable {
    max-width: 100% !important;
}

Would be nice if this was restored to what it was in v1.10.16.

[XhmikosR]

BTW, if you didn't use !importants all over the place, one could just use one of our helper classes, like mw-100.

[XhmikosR]

Is there any way one pass their custom classes for paginate? If so, i could just pass pagination justify-content-start justify-content-lg-end and it should do the job.

[DataTables]

Hi,

Thanks for the feedback. You can use $.fn.dataTable.ext.classes to modify the default classes, which is what the Bootstrap integration does.

The full lists of classes that can be customised is available here.

Also yes, removing the !important's is something I'm working for v2.

But with v1.10.18, the table shows the horizontal overflow and I have to do this:

My guess is that the table isn't in a container, but can you give me a link to a page showing the issue so I can check what is going on there please?

[XhmikosR]

Hmm, I can't see any related option to overwrite the pagination classes. Am I blind? :S

The table shouldn't be a container... Unfortunately I can't share the exact source but here is the gist:

<div class="container main-container my-4">
    <div class="row">
        <div class="col-12">
            <div class="table-responsive py-4">
                <table class="table table-striped table-hover" id="users">

Note that it works fine with 1.10.16 but breaks with 1.10.18.

Thanks for the reply!

[DataTables]

The table its self certainly shouldn't be a container, but it does need to be in a container div, which yours apparently is. The dataTables_wrapper element had a container-fluid class before which is what makes me think this might be the issue.

Also you are right - the ul.pagination is currently coded into the Bootstrap 4 integration.

[XhmikosR]

I tried adding back container-fluid but didn't make any difference. And I couldn't pinpoint the exact commit this broke.

[DataTables]

Are you able to use JSFiddle or similar to show me the problem?

[XhmikosR]

I'll try to set up a codepen tomorrow for the overflow issue and ping you.

[XhmikosR]

@DataTables: I'm having trouble creating a codepen/jsbin without the exact data I'm using. I pinpointed the cause for the overflow-x issue.

1.10.16 adds style=width: 1065px; in the table. v1.10.18 adds style="width: 1114px;".

[XhmikosR]

So, it seems I was wrong before when I said I tried adding back container-fluid. I just tried it now and it's the container-fluid removal that's causing this. It was wrong to use container-fluid there for sure, so perhaps you should add a max-width: 100% in the Bootstrap CSS.

[DataTables]

The table should actually have width:100% already. Have you put a container element outside of the table now?

[XhmikosR]

My markup is the same as before, see https://github.com/DataTables/DataTablesSrc/issues/125#issuecomment-400672229

[DataTables]

My point is, is there a container at a higher level, or does the DataTable sit in a DOM structure which doesn't have a Bootstrap container.

This thread has discussion about the change. I'd really need a test case showing the issue to be able to offer any other help.

[XhmikosR]

As you can see above there was and is a parent container. This is a regression for sure.

I don't mind using my own workaround but I thought I'd report it so that everyone benefits from the fix.

I might try again to get a sample for you but I doubt it'll work.

On Tue, Jul 3, 2018, 18:51 Allan Jardine [email protected] wrote:

My point is, is there a container at a higher level, or does the DataTable sit in a DOM structure which doesn't have a Bootstrap container.

This thread https://datatables.net/forums/discussion/comment/133302/#Comment_133302 has discussion about the change. I'd really need a test case showing the issue to be able to offer any other help.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/DataTables/DataTablesSrc/issues/125#issuecomment-402205220, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVVtfhkbw4ZOS5teu-yHMj25skUIbcJks5uC5MdgaJpZM4U5q8V .

[DataTables]

You are right - I missed that!