Change the width of the buttons in the colvis buttons collection

tidyCode

Fairly new to datatables. I am using a colvis button but my column names are fairly long (of necessity) and the column header text extends beyond the width of some of the buttons in the collection that comes up when I select the colvis button. I have tried styling .dt-button-collection with "width: 600px;" but this does not work. I have also searched this forum and online but have been unable to find a solution. Thanks.

 // RENDER DATATABLE
        $(document).ready(function () {

            //Apply Filters
            $('.filter').on('keyup change', function () {
                //clear global search values
                table.search('');
                table.column($(this).data('columnIndex')).search(this.value).draw();
            });

            $(".dataTables_filter input").on('keyup change', function () {
                //clear column search values
                table.columns().search('');
                //clear input values
                $('.filter').val('');
            });

            //Format and Render Table
            var table = $('#DisplayTable').DataTable({

                "columns": [
                    { "visible": true, "width": '50px' },
                    { "visible": true, "orderable": false, "width": '25px' },
                    { "visible": true, "width": '20px' },
                    { "visible": true, "orderable": false, "width": '248px' },
                    { "visible": true, "orderable": false },
                    { "visible": true, "orderable": false },
                    { "visible": true, "orderable": false },
                    { "visible": true, "orderable": false, "width": '200px' },
                    { "visible": true, "orderable": false, "width": '300px' },
                    { "visible": true },
                    { "visible": true },
                    { "visible": true, "orderable": false, "width": '100px' },
                    { "visible": true, "orderable": false, "width": '100px' },
                    { "visible": true, "orderable": false, "width": '100px' },
                    { "visible": true, "orderable": false, "width": '500px' },
                    { "visible": true, "orderable": false, "width": '800px' },
                    { "visible": false, "orderable": false, "width": '1000px' },
                    { "visible": false },
                    { "visible": false, "width": '200px' },
                    { "visible": false },
                    { "visible": false, "orderable": false, "width": '300px' },
                    { "visible": false, "width": '300px' },
                    { "visible": false, "orderable": false, "width": '400px' }

                ],

                "orderCellsTop": true, //makes it search from the first header row instead of the second
                "autowidth": false,
                "scrollX": true,
                "scrollY": '60vh', //essential a percent of the vertical viewport the table window will take up
                "scrollCollapse": false,
                "paging": false,
                "order": [[2, 'desc'], [0, 'asc'],],
                dom: 'Brtip', //to add a universal filter use 'Bfrtip'
                buttons: [
                    {
                        extend: 'colvis',
                        text: 'Show/Hide Columns'
                    },
                    {
                        extend: 'pdf',
                        text: 'PDF (visible columns)',
                        exportOptions: {
                            columns: ':visible'
                        }
                    }
                ]


            });


            //Unhide table once loaded (prevents html table from briefly showing before the formatted datatable - it is manually hidden above in the HTML)
            var x = document.getElementById('Hide')
            x.style.visibility = 'visible'
        });

sandy

Hi tidyCode,

You can alter the width of the buttons in the drop down by setting the following in your CSS.

div.dt-button-collection {
    width: 200px;
}

We have tried this on the following example and it works for us. If the problem persists please link a test case for us to take a look at and we will try to help further.

Hope this helps,

Sandy

tidyCode

Yes - that does work. Quick and simple. Thanks.