Buttons is breaking UIkit theme structure

PL47ER

Hi,

I am using UIkit for my tool and so I have integrated DataTables and required components to it. I am using pageResizer to auto resize the table inside its container. UIkit being rendered properly without any issues.
Here is what I am importing to the html page to make it work.

<!-- UIkit -->
<link rel='stylesheet' href='css/uikit.min.css'>

<!-- dataTables -->
<link rel='stylesheet' href='css/dataTables.uikit.css'>

<!-- jQuery -->
<script src='js/jquery-3.3.1.min.js'></script>

<!-- dataTables -->
<script src='js/jquery.dataTables.min.js'></script>
<script src='js/dataTables.uikit.js'></script>

<!-- UIkit -->
<script src='js/uikit.min.js'></script>
<script src='js/uikit-icons.min.js'></script>

<!-- Additional dataTables plugins/Extensions -->
<script src="js/dataTables.pageResize.min.js"></script>

Everything works okay so far.

Now I am trying to import the Buttons extension and it breaks the code for table being rendered with UIkit classes.

<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.html5.min.js"></script>

I have captured pictures from Developer Tools (F12) in Chrome to see the difference in structure.

I am 99% sure that I am using the correct configuration when initializing the table but it is something wrong inside the Buttons extension script that is breaking it up. I am suspecting that possibly because Buttons Extension is still not utilized for UIkit yet ?

It would be great if we can fix that so that I can use buttons on my tool. Thanks.

PL47ER

Just attaching pictures to show what is the difference in HTML DOM.

kthorngren

Are you loading buttons.dataTables.min.css? I didn't see it above.

This example seems to look ok with uikit and buttons:
http://live.datatables.net/vewececo/1/edit

For some reason the pageResize plugin doesn't seem to work. I did try it with a basic Datatables environment in http://live.datatables.net/. But this is likely not the issue.

Looks like the difference is the div tags with the uk-grid classes which are wrapped around the Datatable elements (pageLength, search, etc). Is this what you are referring to? If so you can use the dom option to put these in as I assume you are using it to add the buttons. The styling section will give you an idea of what to do for uikit.

Maybe you can tell us or show us exactly what is not correct when you load the buttons.

Kevin

PL47ER

Was just about to update the thread so that it may help to someone having similar issue. The problem was dom configuration.

I have just provided update to Allan on his commit here : https://github.com/DataTables/DataTablesSrc/commit/c1fa0c2cce8c70d735bd6317b9565585715aa18e

I would not publish the same answer here as it would be confusing but at least it gives solution to the issue.