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

Karlo

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..

allan

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

Karlo

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

allan

Oops - thanks! I've committed it now.

Allan