CSS ::before property only working in first column of multi-column colvis buttons in Chrome v63.0.32

eyvoll

I am using Colvis. I have set the collectionLayout property to 'fixed three-column'. I use CSS to put a tick or a cross before my button text, to indicate whether the column is selected or not. Since the lastest version of Chrome has been released, the tick or cross does not show in anything but the first column. It does work in IE11, Edge, Firefox and Chrome v62.0.32.

Here is a screen shot of my problem:

This is the css

/* put a cross to show that a column is not visible */
a.dt-button.buttons-columnVisibility span.glyphicon:before {
    content:"\e014";
}

/* put a tick to show that a column is visible */
a.dt-button.buttons-columnVisibility.active:not(.disabled) span.glyphicon:before{
    content: "\e013";
}

This is the javascript:

    {
                extend: 'colvis',
                columns: ':not(.excluded-from-colvis)',
                className: 'btn btn-primary colvis-button',
                collectionLayout: 'fixed three-column',
                columnText: function ( dt, idx, title ) {
                    return '<span class="glyphicon"></span> ' + title;
                },
                postfixButtons: [{
                                     extend: 'colvisGroup',
                                     text: 'Show all columns',
                                     show: ':not(.excluded-from-colvis)'
                                 }]
        }

allan

Its a Chrome bug. I think this commit should have fixed it - it was in 1.5.0 and 1.5.1. What version are you using?

Allan

eyvoll

Thanks Allan, I have upgraded my version and that has fixed the problem.