className is not working

kittu.rajanala

hi
I have written like below
buttons: [{
extend: 'colvis',
text: 'Column Visibility',
className: 'dt-button-collection-custom',
columns: ':not(:first-child)',
}}

but it doesn't take the className,actually my requirement is i want to add the scrollbar for column Visibility button that's why i am adding custom className but it is not taking tha classNmae

please help me how to do this

thanks
Krishna chaitanaya

deliator

Hello Krishna,

Are your dt-button-collection-custom stored in an external css file ?
I do the same things and it works.

Marc

kittu.rajanala

yes I written in external css file like this

div.dt-button-collection-custom {
overflow-y: scroll;
max-height:450px;
}

but it is not working if it is working for you can u explain with example

deliator

for example, i have in an external css file : .

widthFix {
     width: 165px;
}

and in my datatables

{   extend: 'pdf', 
                    text: '<i class="fa fa-print" aria-hidden="true"></i> Print',
                    title: jsVar, 
                    filename: jsVar, 
                    className: 'btn btn-default widthFix',
                    titleAttr: 'Export filename (.pdf)',
                    exportOptions: { columns: ':visible'},
                    orientation: 'portrait' 
                },

kittu.rajanala

I tried by giving adding width ,overflow:scroll,max-height in my own css file and i mentioned that class like below

{
                            extend: 'colvis',
                            className: 'dt-button-collection hello',
                            text: 'Column Visibility',
                            columns: ':not(:first-child)'
                        }

it is applying to button , but I want it to column visibility div where we are showing column names.