How change colour of selected rows having background image?

klippdassie · October 2022

Thanks for a great plug-in, and sorry for not being able to provide a test case, but hopefully this will be fairly clear:

I have a DataTable in which users can both select specific rows, and click on plus/minus signs (i.e. background png images) in any such row to show/hide child rows. I have previously changed the colour of selected rows using their background-color attribute, but had to switch to using box-shadow when I updated to version 1.12 of DataTables:

.table tr.selected td {
    color: black !important;
    box-shadow: inset 0 0 0 9999px #bed9e5 !important;
}

This works fine in terms of changing the colour, but unlike the previous solution, it also makes my plus/minus images disappear when rows are selected. They are styled like this:

td.details-control {
    background: url('../img/details_open.png') no-repeat top 13px right 10px !important;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../img/details_close.png') no-repeat top 13px right 10px !important;
}

Any ideas on how I can I change the colour of selected rows while keeping my plus/minus signs visible?
Thanks!

rf1234 · October 2022

I had something similar and used z-index like this:

//make sure the modal does not slip to the background!!
$('#id').css('z-index', 9900);

I had to execute this using a timeout of 200 by the way.

Something like this might work:

table
   .on ( 'select', function () {
       setTimeout(function() {
           $('#id').css('z-index', 9900);
       }, 200)
   })

klippdassie · October 2022

Thanks rf1234 will try this!

How change colour of selected rows having background image?

How change colour of selected rows having background image?

Answers

Howdy, Stranger!

Categories

DataTables

How change colour of selected rows having background image?

How change colour of selected rows having background image?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables