Answers

• a.mercier Posts: 8Questions: 2Answers: 0

  January 2018

  This can also be fixed by placing the colvisRestore before the colvis button, in case anyone is wondering.
• allan Posts: 61,759Questions: 1Answers: 10,111 Site admin

  January 2018

  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 Posts: 8Questions: 2Answers: 0

  January 2018 edited January 2018

  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 Posts: 61,759Questions: 1Answers: 10,111 Site admin

  January 2018

  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

  Screenshot from 2018-01-29 09-13-53.png 50.7K
• a.mercier Posts: 8Questions: 2Answers: 0

  January 2018 edited January 2018

  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 Posts: 8Questions: 2Answers: 0

  January 2018

  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 Posts: 61,759Questions: 1Answers: 10,111 Site admin

  January 2018 Answer ✓

  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 Posts: 8Questions: 2Answers: 0

  January 2018 edited January 2018

  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 Posts: 61,759Questions: 1Answers: 10,111 Site admin

  January 2018 Answer ✓

  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 Posts: 6Questions: 1Answers: 0

  September 2018 edited September 2018

  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?