adjust font size at runtime
adjust font size at runtime

https://jyorkejudge.org/A2.php
I have read multiple posts about adjusting the font size and am unable to get it to work.
I can change the size with the following when the page loads:
table.dataTable {
font-size: 1em;
}
I have a slider control with the follow function.
The function runs but it doesn't seem to make any visible changes.
$('#size').on( 'change', function () {
var maintable = $('#Addresses').DataTable();
var newSize = this.value+ 'em';
$('maintable.dataTable').css('font-size', newSize); // Apply the new font size
$('maintable.dataTable td').css('font-size', newSize); // Apply the new font size to the cells
maintable.columns.adjust().draw();
console.log("just adjusted ", newSize);
} );
Replies
The selector
$('maintable.dataTable td')
is incorrect.maintable
is a Javascript variable which won't work as part of the jQuery selector. Yourtable
has thisid="Adresses"
assigned as the ID. So something like this will be more appropriate:However this will only apply to the
td
on the current page displayed as these are the only rows in the document. Usecells().nodes()
withto$()
to get a jQuery object of all the Datatable cells. Then apply the CSS. Replace the second line with something like this:EDIT: Changed the
#maintable
to#Adresses
to correct the code for the provided test case.Kevin
thank you . this works except for the headers, they seem unaffected.
Maybe you need to add something like this:
The headers aren't returned as part of
cells().nodes()
. This returns only the cells in thetbody
.Also note above I forgot to change the
maintable
to be#Adresses
. I edited the code for correctness.Kevin
I see the issue. You have scrolling features enabled. In this case Datatables creates a duplicate
table
with the header and footer and hides the original to facilitate scrolling. The above selectors won't find the duplicatedtable
. You can inspect the table to see this.Use this:
Or to specify a specific Datatable use the original table's ID,
Adresses
for example, and select thediv
Datatables creates with this selectordiv#Adresses_wrapper
. Then find thetable
below thediv
which has the duplicated header, like this:Kevin
If you want to adjust the size of all text in the table, you might be best just adding a class or style to the
table
element itself. That would be more efficient in terms of processing. It might need an!important
depending on the other styles on the page.Allan
Thank you Allen,
I added a class to the table tag:
<
table cellpadding="0" cellspacing="0" border="0" class="display" id="Adresses" width="100%" class="dt-resizeable">
At runtime, I am trying to reference the table and it's not finding it:
const myElement = document.getElementById('dt-resizeable');
In web developer tools, I notice the class that I specified is not present:
<
table cellpadding="0" cellspacing="0" border="0" class="display dataTable dtfc-has-start dtfc-has-left dtfc-scrolling-end dtfc-scrolling-right" id="Adresses" width="100%" aria-describedby="Adresses_info" style="position: absolute; top: 0px; left: 0px; width: 100%;">
But
I see a little problem there
.
You either want to change the selector to
Adresses
or usedocument.getElementsByClassName
.Allan
Sorry about that, I corrected that to the following but the header text still doesn't change, the datatable values do change:
var newSize = this.value+ 'em';
var myElement = document.getElementById('Addresses');
myElement.style.fontSize = newSize;
Thank you
As I said you have scrolling features enabled so you need to use a selector that finds the duplicated
table
which has the header and footer. Looks like your test case is down. Go to this example and past this into the console:If you want to be more specific with the table that is adjusted, ie if you have more than one table on the page, then use this:
Paste it into the console of the same example.
For your test case change
#example_wrapper
to#Adresses_wrapper
.Kevin
thank you, I finally understand and got it.