Theming of DOM elements

apaquet

I have been able to theme my tables and get by with global changes to the DOM elements until the 1.10.22 update which had the

Fix: Chrome 83 introduced some really ugly defaults for input elements, so we've had to add some custom styling to tone it down a bit

in it. I've done this by adding a class when defining the table. e.g.

<table id="table_id" class="display compact ' . $theme . '" style="width:70%">

Now, because of the background-color: transparent; line in the .dataTables_wrapper .dataTables_length select and .dataTables_wrapper .dataTables_filter input sections in the new datatables.css file, my dark-themed page text in the length and filter boxes is black, the same as my background.

Is there any way to add a class to the dynamically created <div id="table_id_wrapper" class="dataTables_wrapper"> div element?

I've worked around it by overriding the background-color to white in my CSS file but it would be nice to be able to theme the DOM elements like the table elements.

FYI - I did try to add a class to the length and filter elements during initialization but the background-color change did not work because it adds the class to the entire DOM element, not the select and input elements within the div.

...
"dom": '<"myinfo"i><"mywhitedom"lf>rt<"mybuttons"B>p',
...

colin

Probably the best place to add the class would be initComplete, something like this: http://live.datatables.net/wehoyicu/1/edit

    initComplete: function() {
      $('div.dataTables_wrapper').addClass('demo');
    }

Colin

apaquet

So this didn't do it (it change the table elements, not the DOM element) but it did give me something to play with. I made the following changes to change the select and input text and background. Note: I had to add the !important to get it to override the background-color inherited from .dataTables_wrapper.

$(document).ready( function () {
  var table = $('#example').DataTable({
    initComplete: function() {
      $('div.dataTables_length').addClass('demo');
      $('div.dataTables_filter').addClass('demo');
    }
  });
} );

and

.demo select {
  color: orange;
  background-color: yellow !important;
}
.demo input {
  color: orange;
  background-color: yellow !important;
}

http://live.datatables.net/wehoyicu/6/

Thank you so much Colin!

apaquet

PS - I screwed up and clicked "No" instead of "Yes" to "Did this answer your question?" Can that be changed?

colin

Done