Buttons Collection not working under Bootstrap Modal

luisrortega

Hi, when using DataTables Buttons with collection under a modal screen (bootstrap), the collection buttons does not show (I believe it shows behind the screen).

luisrortega

var DefButtons =
 [
            {
                dom: {
                  button: {
                      tag: 'button',
                      className: 'btn btn-info'
                      }
                  },
                extend: 'collection',
                text: '<i class="fa fa-file-o"></i>',
                className: 'btn btn-warning',
                autoClose: true,
                buttons: [
                    {
                        extend: 'copyHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        text: 'Export to CSV',
                        extend: 'csvHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        text: 'Export to Excel',
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        text: 'Export to PDF',
                        extend: 'pdfHtml5',
                        exportOptions: {
                           columns: ':visible'
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                           columns: ':visible'
                        }
                    },
                    {
                        text: 'Reload',
                        action: function ( e, dt, node, config ) {
                            this.ajax.reload();
                        }
                    }
                ]
            },
            {
               text: '<i class="fa fa-columns"></i>',
               extend: 'colvis'
            }

        ];

allan

Its probably a z-index issue. Can you link to a page showing the issue so I can debug it please.

Allan

luisrortega

The development code is on a private network, but I should be able to update QA's servers in a few days... I'll post the link as soon as it is updated!

luisrortega

Fixed!!! Thanks for pointing me in the right direction!

Modal class in bootstrap has the following z-index

.modal 1050
.modal-backdrop 1040
.navbar-fixed-top 1030

The following css fixed the problem

.dropdown-menu{
z-index:1051;
}

Thanks Allan!