SearchPanes - Column Titles, Remove Ellipses

SQLGuru

I have a searchpane that I am trying to modify to suit the client requirements.
I have made the searchpane 5 columns across, even though I would prefer 6.

The issue I am having is that the searchpane looks really large and can fit 6 columns across, but then the headers get truncated and suffixed with the elipses, even if I disable the controls.

Is there anything I can do to force the title to not show the elipses (i.e. show the full title)?
I have included a screenshot so that you can see what I am talking about, I have also included my code below

Screeshot: https://ibb.co/fq8n8p7

$('#style-2').DataTable({
             "dom":  "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'Bf>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>" +                    
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            "oLanguage": {
                "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
               searchPanes: {
                    clearMessage: 'Clear Selections',
                    collapse: { 0: 'Filter Options', _: 'Filter Options (%d)' }
                }
            },
            "stripeClasses": [],
            "lengthMenu": [10, 20, 30],
            "pageLength": 10,
            stateSave: false,
            //stateSaveCallback: function(settings,data) {
            //    localStorage.setItem('DataTables_' + window.location.pathname, JSON.stringify(data) )
            //},
            //stateLoadCallback: function(settings) {
            //return JSON.parse( localStorage.getItem('DataTables_' + window.location.pathname ) )
            //},
            //stateDuration: 60 * 60 * 168,
            searchPanes: {
                controls: false,
            },
            columnDefs: [
            {
                searchPanes: { show: true, },
                targets: [ 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ],
            },
            {
                searchPanes: { show: false, },
                targets: [ 0, 1, 2, 3, 4, 21 ],
            },
                { visible: false, targets: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] },
                { orderable: true, targets: [0, 1, 2, 3, 4] },
                { type: 'alt-string', targets: [2] },
                { orderable: false, targets: '_all' }
            ],
            buttons: [
                {
                extend: 'searchPanes',
                config: { layout:'columns-5', controls: false }
              }
            ]
        });

sandy

Hi @SQLGuru ,

Take a look at the searchPanes.dataLength config property. If you set it to false the ellipsis will never be shown.

Thanks,
Sandy

SQLGuru

Thank you so much for your response. This worked, but not 100%. I had to override the INPUT box width and make it wider in order for the full title to display.