Info and Paging with "normal" font-weight

jeff73230

Hi everyone,

Is there anybody to tell me why, when using DataTables with Bootstrap 4, the information at the foot of all my tables appears in bold type (and not those in the header) ?

in the footer in order to modify info and legthMenu and localization...

If anybody can tell me where i've made mistake(s), any help would be VERY appreciated.

Thanks

Jeff

kconrad

I checked my datatables.min.css file:

table.dataTable tfoot th{font-weight:bold}

And when I inspect the search box of one of my datables, it uses the class dataTables_filter, and comes before the table and therefore isn't included in <thead>

jeff73230

Hi kconrad,

Thanks for help, but after checking, i have no datatables.min.css.
only dataTables.bootstrap.css, and dataTables.bootstrap4.min.css (the only one used in the header.php).
Should i add the datatables.min.css file ? Will not it come into conflict with the other CSS already present ?

Thanks again for help

kthorngren

It does seem like you have a CSS issue and without actually seeing the page or a test case showing the issue it would be difficult to say what the problem is.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You are correct that you don't want to load datatables.min.css with the BS4 integration. This example is showing what you want, I think, without the localization:
https://datatables.net/examples/styling/bootstrap4.html

I see a couple issues with your code but don't think it is causing your issues:

1. The info option is expected to be a boolean value. I think you want what you have in the language.info option.
2. Based on what you posted it doesn't look like you are using buttons or fixed header. If you do you might want to make sure you load the BS4 integration files for those also. You can download the appropriate combination of files using the Download Builder.

Kevin

kconrad

Hi Jeff,

Allow me to clarify quickly.

The section you are referencing as not being bold exists outside of the table, in regards to the code generated by the DataTables plugin.

When I inspect my table in my browser and examine the elements, this is what it looks like:

the dataTables_filter class is the search bar that would show in my table, and is the same class wrapped around your section that has an input box and the label "Recherher". Since it is not included in between your

<

table> tags, it will not receive the same styling as what shows in your header row (you have it blurred in your image but you can tell it looks bold).

The way you can make this text bold is by adding the following code snippet to your main css file (or just add it onto the page you want it to be bold on):

.dataTables_filter{
font-weight:bold;
}

colin

Hi @jeff73230 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

jeff73230

Hi kthorngren, kconrad and Colin
Many thanks to each of you.
@kthorngren, I had already consulted the https://datatables.net/examples/styling/bootstrap4.html link, and
I opted for a radical solution, and by cleaning the code severely, I found a <b> unclosed tag ... it only remains to hope that this is due to an unfortunate copy / paste....
Anyway, many many thanks again to each of you for your help