-moz-transform deactivates sorting select field in datatable header

Question

I have a jQuery datatable generated in my webpage. Since it was too big, I used zoom:0.8; to fix its size in Google Chrome.

This didn't do it for Firefox though, so I added -moz-transform: scale(0.8); to the CSS sheet. Everything still works fine in Chrome, but if Firefox now shows the datatable correctly, it seems I cannot change the sorting value anymore in the header. I can click to see the list of items, but I cannot click them (nothing happens). I did not modify anything else than adding one line to my css file.

How can I fix this?

jsbin

jsfiddle

Note: There is a similar known bug filled at Bugzilla, although it was reported in 2008 and still is not fixed. It would be interesting to find a way around this issue.

Answer 1

I deleted the l from my sDom property when declaring the first instance of my datatable.

Then, I added this just before the <table> tag in my code:

<div class="selectLength">
    <span>Show</span>
    <select id="Length">
        <option value='5'>5</option>
        <option value='10'>10</option>
        <option value='25'>25</option>
        <option value='50'>50</option>
    </select>
    <span>elements in the datatable.</span>
</div>

Here is the javascript associated to this (jQuery is needed):

$('#Length').change(function() {
    var displayLength = $('#Length option:selected').val();
    var oSettings = $('.adminTable').dataTable().fnSettings();
    oSettings.iDisplayLength = displayLength;
    $('.adminTable').dataTable().fnDraw();
});