Search code examples
scrolldatatabledatatables

Datatable scroll x issue using fixedColumn

im using jquery datatables with fixedColumns. Everything working fine but im having an issue with scroll x.

enter image description here

As u can see, i cant remove the scroll x from fixed column. Any ideas to solve this? Initialization:

$(document).ready(function(){
    var oTable = $('#matriz').dataTable({            
        "bStateSave": true,
        "iCookieDuration": 60*60*24*30*365,
        "sDom": 'TC<"clear">lfrtip',
        "oTableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "xls",
                    "sButtonText": "Excel",
                    "mColumns": 
                        [ 
                            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
                            13, 14, 15, 16, 17, 18, 19, 20, 21, 22
                        ]
                }
            ]
        },   
        "aoColumnDefs": [
            { 'bSortable': false, 'aTargets':
                [
                    8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 21, 22, 23 
                ] 
            }
        ],            
        "pagingType": "full_numbers",            
        "oLanguage": {
            "sInfo": "Exibindo de _START_ até _END_. Resultados encontrados: _TOTAL_",
            "sSearch": "Pesquisar: ",
            "sEmptyTable": "Não existem solicitações para exibir.",
            "sLengthMenu": "Visualizar _MENU_ solicitações",
            "oPaginate": {
                "sFirst": "Primeira",
                "sLast": "Última",
                "sNext": "Próxima",
                "sPrevious": "Anterior"
            }
        },            
        "oColVis": {
            "buttonText": "Ocultar colunas",
            "bRestore": true,                        
            "aiExclude": [ 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 23 ],
            "sRestore": 'Restaurar'
        },            
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todas"]],
        "iDisplayLength": 10,
        scrollY:        325,
        "sScrollX": "100%",
        scrollCollapse: true,
        fixedColumns:   {
            leftColumns: 1
        }            
    });
    setTimeout(function (){
        oTable.fnAdjustColumnSizing();
    }, 10 );        
});
Solution

  • Adding overflow-x:hidden to the DTFC_LeftBodyLiner div seems to fix the display issue.