label of buttons does not show in chrome when put in multi-columns collection layout

leprinco

With the code below, label of buttons does not show in chrome (but correctly in Firefox)
Seems to come from overflow: hidden, positioned on collection. Please see result :

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/datatables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Name2</th>
                <th>Position2</th>
                <th>Office2</th>
                <th>Extn.2</th>
                <th>Start date2</th>
                <th>Salary2</th>
            </tr>
        </thead>
</table>

<script>
var arraydata = [
        [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011\/04\/25",
            "$320,800",
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011\/04\/25",
            "$320,800"
        ],
        [
            "Garrett Winters",
            "Accountant",
            "Tokyo",
            "8422",
            "2011\/07\/25",
            "$170,750",
            "Garrett Winters",
            "Accountant",
            "Tokyo",
            "8422",
            "2011\/07\/25",
            "$170,750"
        ]
    ];

jQuery(document).ready(function() {
    $('#example').DataTable( {
    data: arraydata,
        dom: 'Bfrtip',
    buttons: [ 
        { extend: 'colvis', collectionLayout: 'three-column' }
    ]
    } );
} );
</script>

allan

Hi,

There was a thread on this topic just a couple of days ago.

Can you give me a link to the page showing the issue please?

Allan

leprinco

Just save my comment code in a local file and open it in chrome.
You will see the issue.
thanks
Oliver

allan

Yup - got it now: http://live.datatables.net/jilupawi/1/edit .

Looks like the Chrome bug again - it works without issue in other browsers.

I'll tried to find a workaround and post back when (if) I get one.

Allan

allan

Working here: http://live.datatables.net/jilupawi/3/edit .

Workaround committed here.

Thanks,
Allan