Column Select filter doesnt use fontsize

georgeforster

When I create a table, and use the css font-size to adjust the font size in the table, the header, body and footer change font size.

When I add the column filter by select to the table the font in those elements do not change to match the selected font-size

See http://flywestwind.org/AircraftScenery/AircraftListtest.php to show the results

Here is my javascript

<script>

$(document).ready(function() {

    $('table.example').DataTable( {

        initComplete: function () {

            this.api().columns().every( function () {

                var column = this;

                var select = $('<select><option value=""></option></select>')

                    .appendTo( $(column.footer()).empty() )

                    .on( 'change', function () {

                        var val = $.fn.dataTable.util.escapeRegex(

                            $(this).val()

                        );

 

                        column

                            .search( val ? '^'+val+'$' : '', true, false )

                            .draw();

                    } );

 

                column.data().unique().sort().each( function ( d, j ) {

                    select.append( '<option value="'+d+'">'+d+'</option>' )

                } );

            } );

        }

    } );

$('#size').on( 'change', function () {
    $('table.example').css( {
      'font-size': this.value+'em',
      'line-height': this.value+'em'
    } );
  } );

} );
</script>

allan

select elements are an utter pain to style. You need to add select { font-size: inherit } to your CSS.

Allan

georgeforster

Thanks Allan

I changed my code to

 var select = $('<select style="font-size:inherit;">
    <option value="">All</option></select>')

and it worked like a charm