Broken colvisRestore layout

a.mercier

Hey there. I'm using bootstrap 4 and I believe I found a little styling error using the colvisRestore button.
https://imgur.com/Sxygsb0

I don't think a working test case is required, for it seems to be a styling issue with DataTables buttons.

This is the CSS that I'm using (but theme's are not the problem. The issue is present even with the default bootstrap css):
https://bootswatch.com/4/litera/bootstrap.min.css

Kind regards

a.mercier

This can also be fixed by placing the colvisRestore before the colvis button, in case anyone is wondering.

allan

A test case is always welcome. I've just created this one: http://live.datatables.net/wiyuhohu/1/edit . It almost works okay, there is a little rounded corner, but not as pronounced as in your image. Can you link to a test case showing the same as in your image?

Allan

a.mercier

Hi Allan,

I've edited your preview, with the Litera theme from Bootswatch (which is freely available) to very clearly demonstrate the effects:
http://live.datatables.net/wiyuhohu/2/edit

AFAIK, the problem is not the theme itself, but rather the way DataTables handles the colvisrestore button positioning. (Not placing it inside a button group, perhaps?)
The problem can be fixed by placing the colvisRestore button before the colvis button, in any case.

Kind regards

allan

I think it is actually a bug in the theme. The theme CSS uses:

.btn {
    border-radius: 1.078em;

While Bootstrap uses:

.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

The button is in a group:

So it looks like the issue is that the theme isn't adding handling for :first-child to remove the border-radius on the right.

I might be wrong, but that's how I'm reading the code in that example.

Allan

a.mercier

Afraid that the theme itself does the exact same thing Bootstrap does;

.btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0 }

But it definitely has something to do with the border radius. Still, it remains odd that if you place the colvisrestore button first, the entire issue is non-existant. Not even using the standard bootstrap css:
Default (Still issue is visible)
http://live.datatables.net/wiyuhohu/1/edit
Reversed:
http://live.datatables.net/wiyuhohu/6/edit

a.mercier

I can't seem to find any differences between the computed values between the two examples. So either I'm blind, or browsers are acting up?

allan

Its this in Bootstrap (from their example):

.btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

:not(.dropdown-toggle) is what is causing the issue there. Putting a drop down as the first item is causing the problem. That looks like a Bootstrap bug to me I'm afraid.

Allan

a.mercier

The bootstrap guys have answered:

Not a bootstrap bug. A .dropdown-menu must be last child of the wrapper (.dropdown, .btn-group or another element that declares position: relative). This condition is the same as bootstrap v3.

So it appears, we will have to place the colvisRestore button before the colvis one

I'm curious though if this behaviour is the same with Bootstrap 3.3.7 and DataTables

allan

Interesting - thanks for looking into that. i wasn't aware of that limitation in Bootstrap and I'm not seeing it in their documentation from a quick scan, but I might just be missing it. From that description, it would be an issue in Boostrap 3, but perhaps the styling just doesn't make it as visible.

Allan

hackeresq

Some testing (and review of the BS4 docs) leads me to the conclusion each .dropdown-toggle needs to be wrapped in their own .btn-group (as bizarre as that sounds):

<div class="dt-buttons btn-group">
     <div class="btn-group">
          <button class="btn btn-secondary buttons-collection dropdown-toggle buttons-colvis" tabindex="0" aria-controls="example" aria-haspopup="true">
               <span>Column visibility</span>
          </button>
      </div>
</div>

The above snippet fixes the bug in http://live.datatables.net/wiyuhohu/1/edit. I used Chrome inspect to manually add the .btn-group div and it solved the issue with border-radius.

How can I add a parent .btn-group div to my colvis button programmatically in DT? Is that even possible? Since this resolves the issue, perhaps a patch is in order?