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

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

eyvolleyvoll Posts: 2Questions: 1Answers: 0

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)'
                                 }]
        }

Answers

This discussion has been closed.