Buttons dropdown-menu alignment

fischer

Hi,

I'd like to make the dropdown-menu create by Buttons method right aligned. Code looks like this:

var exportBtn = new $.fn.dataTable.Buttons(table, {
    buttons: [{
        extend: 'collection',
        text: '<i class="mdi mdi-dots-horizontal mdi-icons-table"></i>',
        className: 'btn-fw-grey border-0 with-data-toggle',
        buttons: [
            {
                extend: 'copy',
                text: '<a class="dropdown-item pl-0" href="#"><i class="mdi mdi-content-copy pr-2"></i>Copy</a>',

            }
        ]
    }]
});

I'd like to make sure that the resulting menu will have class dropdown-menu-right.

Help much appreciated.

colin

Hi @fischer ,

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

fischer

@colin : Thank you. As requested, I have created a created a minimal test case. You can see that the Buttons dropdown togle is at the top right corner. Its dropdown menu goes on beyond the right border of .card. I'd like to align the dropdown menu with the right side of the dropdown toggle.

http://live.datatables.net/qavuhibe/1/

allan

In theory it should be a case of using the align property of the collection button:

align: 'button-right',

But it looks like there is a bug in a corrective calculation for overflow. I've committed a fix and the nightly will rebuild soon.

This is the updated example which should work when the nightly is built.

Allan

kinguru

align: 'button-right'
is not working.

I've a colvis button which dropdown drops to the right outside of the window visibility. How i could fix it to make dropdown to drop to the left?
It's bootstrap standard class "dropdown-menu-right"
but i can't figure out how to add it to the dropdown is it documented in datatables?

kinguru

UPD: dropdown visibility is fixed by Datatables update procedure.
But "align" option for 'colvis' is not working

colin

Can you update Allan's example above to demonstrate the issue, please, it'll help us ensure we're looking at the same thing,

Colin