Bootstrap4 Dropdown Toggles border-radius

hackeresq

The border-radius on button dropdowns is not working as expected:

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>

This came up in a similar question: https://datatables.net/forums/discussion/comment/139963. But I actually think these are the same issue.

I used Chrome inspect to manually add the wrapper .btn-group div and it solved the issue with the border-radius. I.e. wrapping each ".buttons-collection.dropdown-toggle" in a parent wrapper div of ".btn-group"

Testing shows this works well and restores the proper border-radius for the dropdowns.

How can I add a parent .btn-group div to my colvis button programmatically in DT? Is that even possible?

colin

Hi @hackeresq ,

Would something like this work? It came from this thread here and seems to do what you're after.

Cheers,

Colin

hackeresq

Not exactly what I was looking for. But it got me thinking!

I can wrap the .dropdown-toggle elements in a .btn-group after the table has initialized.

I added this to the table options:

initComplete: function ( settings ) {
   $('.buttons-collection.dropdown-toggle').wrap('<div class="btn-group"></div>');
}

Totally worked.

It just feels like a dirty fix though. I'd prefer this to be native functionality. Is there any way to add that functionality to the DataTables Bootstrap 4 integration (dataTables.bootstrap4.min.js)?

allan

Interesting. What class have you given to your buttons? The demo here doesn't have that issue, but it doesn't use the same styling as your picture above.

Allan

hackeresq

Hi @allan, I can confirm the demo you sent does have the same issue. To reproduce the issue, try adding another button that uses .dropdown-toggle (for example I have colvis and pageLength). In other words it's a latent issue that looks fine with one dropdown, but it becomes obvious with two.

To answer your question though, I am using .btn-outline-secondary as my button class. Here's my button definitions:

buttons: [
    {
        extend:    'copyHtml5',
        text:      '<i class="fas fa-copy"></i>',
        titleAttr: 'Copy to Clipboard',
        className: 'btn-outline-secondary'
    },
    {
        extend:    'excel',
        text:      '<i class="fas fa-file-download"></i>',
        titleAttr: 'Download to Excel',
        className: 'btn-outline-secondary'
    },
    {
        extend:    'print',
        text:      '<i class="fas fa-print"></i>',
        titleAttr: 'Print',
        className: 'btn-outline-secondary'
    },
    {
        extend:    'colvis',
        text:      '<i class="fas fa-columns"></i>',
        titleAttr: 'Visible Columns',
        columns:   ':not(.noVis)',
        className: 'btn-outline-secondary'
    },
    {
        extend:    'pageLength',
        text:      '<i class="fas fa-th-list"></i>',
        titleAttr: 'Number of Rows',
        className: 'btn-outline-secondary'
    },
],

To be clear, the BS4 docs require a .btn-group wrapper for each .dropdown-toggle. Here's a comparison demo.

That all being said, my workaround is functional. But I think that this should definitely be default functionality.

allan

Yup - I'm with you now. Thanks for letting me know about this!

I agree - this is something that Buttons should do itself. I don't currently have a hook that the Bootstrap 4 integration can use to do this, so I've added it to my bug tracker for the next Buttons release (unfortunately I did a Buttons release last night).

Allan

hackeresq

Great! Thanks @allan! You've done great work with Datatables. I'll keep an eye out for the next release.

hackeresq

Just wanted to provide an update:

My workaround had a bug where it would misbehave on pages with multiple tables. That is, the jQuery selector was generic and would wrap button group classes around all of the dropdown buttons n-number of times based on the number of tables on the page. So I ended up with dropdowns wrapped inside of 10 btn-group classes.

My solution was to use a specific selector as shown below:

initComplete: function ( settings ) {
      $("#" + settings.sInstance + '_wrapper .buttons-collection.dropdown-toggle').wrap('<div class="btn-group"></div>');
}

Problem solved. Now it only wraps the btn-group class on the buttons within that instance of datatables avoiding the n-plus problem. Just wanted to share.

allan

This has finally been fixed in the source and will be part of the next release .

Allan