Problem with Bootstrap 4 integration

jstuardo

Hello,

When integrating with Bootstrap 4, the text in the pagintation area looks ugly.

Please see this:

http://live.datatables.net/pecutoqo/1/

See it in live preview, then simulate iPhone 6 device. It looks good at first, but now, use the simple search to search, for example, "tect". Now, see the text: "Showing 1 to 7 of 7 entries (filtered from 57 total entries)". It looks ugly.

I have found that the problem is caused by this CSS style:

`div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.85em;
    white-space: nowrap;
}`

If I remove the "nowrap" style, it looks good.

Furthermore, the margin top is small and not 0.5em as the non bootstrap4 version.

Is this a bug and I will need to override that CSS or do I have to apply some other configuration to the table?

Regards
Jame

sandy

HI @jstuardo ,

Would you mind attaching a picture of what you are seeing? It looks fine to me when I load the example.

Thanks,
Sandy

jstuardo

Hello,

Here it is:

This is how it should be seen:

I have cloned the live demo because former one was created as anonymous:

http://live.datatables.net/qipusuja/1/edit?output

Regards
Jaime

allan

Hi Jamie,

Thanks for the examples. You could use:

div.dataTables_wrapper div.dataTables_info {
    white-space: normal;
}

http://live.datatables.net/pecutoqo/2/edit

I'm not sure why I put that style in originally - and looking at the git history it has been there right from the start of the BS4 integration. I'll look into removing it.

Regards,
Allan

colin

It's been removed now - as you can see from your example updated with the nightly builds: http://live.datatables.net/pecutoqo/4/edit

Colin