Bootstrap4 Collections Dropdown not visible

nigelc

Hi, i've downloaded the bootstrap 4 build and added collections in as follows

buttons: [
                    {
                        extend: 'collection', 
                        layout: 'fixed',
                        text: 'Export..',
                        className: 'btn btn-outline-primary',
                        buttons: [
                            'csv', 'excel', 'pdf'
                        ],

                    },

But....

When viewing the frontend there is an issue with the dropdown not showing. When inspecting, everything is there and the structure is sound.

I found that under dt-collection > dropdown-menu required btn-group class to actually display the menu items. I'm just not sure how to add that in to the dropdown-menu div.

Any help appreciated, thanks

kthorngren

Looks like it works here:
http://live.datatables.net/jofiyivu/1/edit

Maybe a CSS issue?

Could be a z-index issue. Checkout this thread. There are other threads on the forum discussing similar issue.

Kevin

nigelc

Thanks Kevin,

I've seen most of those threads :-),

Unfortunately z-index has no impact. the only thing i've found to work is by adding "btn-group" to the dropdown-item div. It's getting late now, maybe i'll look at it again tomorrow with a clear head.

nigelc

It is definitely a css issue, for some reason the absolute positioning is causing issues.

Here's my fix

/*
    Override Datatables Dropdown
 */
.dt-button-collection .dropdown-menu {
    position:relative !important
}