Datatables with Semantic UI getting strange behavior

minifiredragon

I cannot seem to track down why it is doing it, and I am not sure if it is something that needs to be fixed within datatables and columnToggle or not.

http://live.datatables.net/nawepehe/11/edit

If you look at the columnToggle button box, you will see the button wrap ends before the buttons end. Specifically scroll to the right and the last "Name" button you will see the button box ends but buttons continue.

The other issue is the show entries box is not selectable anymore. I know it has something to do with the class "form" because when I remove it, the drop down works.

Any suggestions?

allan

Interesting. It's because the buttons are flowing out of the ui container element which has:

.ui.container {
    display: block;
    max-width: 100% !important;
}

If you disable the max-width you can see the "oddness" change position. Still not fixed, since the buttons are still flowing out of the table div.

Looking at the Semantic UI docs I don't see an option to have long lists wrap, so you might have to do something like:

ui.basic.buttons {
    flex-wrap: wrap;
}

(that's not perfect though - there are still odd quirks that you might need to iron out). The other option is to the the dropdown colvis button and possibly use it in it's fixed position styling with multiple columns which will work with Semantic UI as well as our default styling.

Allan

minifiredragon

I went about setting it to a static size, something like:

table.buttons().container().addClass('toggle').css('width','3450px');

As a side note, as an update, might I recommend setting the toggle class as well as basic buttons. It makes the off and on position so much more visible.

And any ideas on the form issue with the entries drop down?

allan

As a side note, as an update, might I recommend setting the toggle class as well as basic buttons. It makes the off and on position so much more visible.

I actually thought we did that already, as can be seen here?

And any ideas on the form issue with the entries drop down?

I've not seen that one before I'm afraid. Are you able to give me a link to your page so I can check it out? Another option would be to use the lengthMenu button.

Allan

minifiredragon

To answer both of your questions, I already set up a demo in the link above which I copied:

http://live.datatables.net/nawepehe/11/edit

I am using what ever the most current CDN you have setup. As you can see there is only the basic button in there, I do use the table.buttons().container() to add the "toggle" class. I have it remmed out in the demo I posted so I could point out the button container not holding all buttons easier. When you activate it you can see how much clearer it is to see what columns are toggled (I changed the color to blue, it is set to green by default).

In the demo above, you will also see the Show XX Entries is not change or clickable.

allan

Thanks! The unclickable length menu is because the filtering element is on top of it (the length menu has float: left) so you could use:

.dataTables_length {
    float: none;
}

but a better solution would be to use a grid layout for the dom option that is suitable for Semantic UI.

I see your point about the toggle class. I will consider that - I feel that it makes the buttons "bolder" than most would like, so while there is a workaround at the moment I'll not make that change immediately, but would welcome feedback from anyone else using Semantic UI with DataTables.

Allan

minifiredragon

I noticed one more issue with datatables and semantic ui. The fixedHeader: true, does not make the header stick at the top.

allan

Interesting, as it does in this example. I'm not immediately sure what is causing that issue in your example. I'll dig into it more.

Allan

minifiredragon

I narrowed it down to my html css:

overflow: auto;

Once I removed that it worked.