Replies

• allan Posts: 63,538Questions: 1Answers: 10,476 Site admin

  February 2020

  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 Posts: 82Questions: 16Answers: 2

  February 2020

  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 Posts: 63,538Questions: 1Answers: 10,476 Site admin

  February 2020

  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 Posts: 82Questions: 16Answers: 2

  February 2020 edited February 2020

  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 Posts: 63,538Questions: 1Answers: 10,476 Site admin

  February 2020

  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 Posts: 82Questions: 16Answers: 2

  February 2020

  I noticed one more issue with datatables and semantic ui. The fixedHeader: true, does not make the header stick at the top.
• allan Posts: 63,538Questions: 1Answers: 10,476 Site admin

  February 2020

  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 Posts: 82Questions: 16Answers: 2

  February 2020

  I narrowed it down to my html css:

  overflow: auto;

  Once I removed that it worked.