Two datatables buttons dropdowns - initially overlap

RobinS

Hi -
I'm using datatables buttons with ColVis. I have my buttons in a collection for a dropdown (pdf, excel, etc), and then colvis as a dropdown next to it., for example

buttons: [
     {
          extend: 'collection',
          text: 'Export Options' + '  <i class="fa fa-caret-down"></i>',
          autoClose: true,
          buttons: [  excel, pdf, etc ... ]
      },
      {
        extend: 'colvis',
        text: 'Display Columns' + '  <i class="fa fa-caret-down"></i>',
      },
]

They display just fine, but if I have one open, and open the other, the second one will be positioned where the first one was. (The element style Top and Left is set to the old values). If I click off so that the first menu is closed, then open the second, it is positioned fine.

I'm using bootstrap and the buttons are inside a div.dt-buttons.btn-group

Anyone have any ideas? Many thanks in advance!

colin

Hi @RobinS ,

That's going to be some in the CSS, but it's hard to diagnose without seeing it. We're happy to take a look, but it would help if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

RobinS

Thanks- it's good to know that it's not a normal issue and something with some css somewhere. Unfortunately my app is a kitchen sink of libraries so it's not easy to put up anywhere, and it's also not public facing. Thanks!

svetlanka

I have the same problem. Did you found a solution?

colin

Hi @svetlanka ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin