colvis multi-column layout doesn't work with Bootstrap 4

colvis multi-column layout doesn't work with Bootstrap 4

KarloKarlo Posts: 34Questions: 10Answers: 0

Hi!

Since upgrading from BS3 to BS4.1.1 the multi-column layout (like in the example here: https://datatables.net/extensions/buttons/examples/column_visibility/layout) doesn't work any more. All buttons appear in a single column.

Looking into the file buttons.bootstrap4.css I see e.g. this definition:

ul.dt-button-collection.dropdown-menu.two-column {
  width: 300px;
  padding-bottom: 1px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
}

but actually in the DOM the buttons are like this:

<div class="dt-button-collection dropdown-menu two-column">
<a tabindex="0" class="dt-button dropdown-item buttons-columnVisibility" href="#">
…

Changing

ul.dt-button-collection.dropdown-menu.two-column {

into

div.dt-button-collection.dropdown-menu.two-column {

solves the problem, but there are several other css targeting ul´s..

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Thanks! I missed that in 1.5 which transitioning to the a tags. I'll post back shortly when I've committed a fix.

    Allan

  • KarloKarlo Posts: 34Questions: 10Answers: 0

    Hi Allan,

    I just looked into buttons.bootstrap4.css of datatables.net-buttons-bs4 (V1.5.4) and saw that the css mentioned above is unchanged.

    I could create a PR, but I'm not really sure whether to change all the ul… rules into div..., what do you think?

    Thanks
    Karlo

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Oops - thanks! I've committed it now.

    Allan

This discussion has been closed.