Disable Hover Highlighting in Child Row

andrewe

Hello!

I am currently using DataTables for an internal project at work. One feature I really enjoy is the child row. However, I am having trouble with the formatting.

Inside the child row, I create a simple HTML table. However, this table is inheriting the hover highlighting style that the main table has.

I wrote up a simple example. Click any row in the table to display the child row.
http://jsfiddle.net/v29ek1ob/

As you can see, the table in the child row has the same hover behavior as the main table. This normally would not be that big a deal, but the table in my application has another nested table, and at this point the highlighting gets to be disorienting.

Ideally, I would like to remove any and all styling from the newly created child row. I tried adding a class to the child row upon creation and then overriding the style, but this did not work.

As a disclaimer, I am very new to CSS and web dev, so this may be more of a CSS question than a DataTables one.

Thank you!

ThomD

This is one approach, if you main table has the id of 'example'

put a hash tag in front of the word example below:

example tbody tr.smalltable td:hover {
    background-color: transparent;
}

change this

            row.child( format() ).show();
            tr.addClass('shown ');

to this

            row.child( format() ).show();
            $(row.child()).addClass('smalltable');
            tr.addClass('shown ');

andrewe

This does not seem to work.

http://jsfiddle.net/Ljkg10ja/

ThomD

I only focused on the background color because it is the easiest to see. I do not see any hover changes in the child in your second example. What are you seeing? You can use the debugger in IE or Chrome to see what styles are applied when you hover.

andrewe

Here is what I am seeing:

http://g.recordit.co/RkVGKfVWc2.gif

Maybe I was unclear initially. I am trying to remove any sort of hover effect on the child rows.

ThomD

No access to that gif. You will have to identify each behavior (browser debugger for the win) and set the overriding or clearing value in that css I posted.

andrewe

Does this work?

http://i.giphy.com/3o85xk58knzKZ17ryw.gif

ThomD

OK, I can see that gif, but I don't see any obvious hover triggered change. there may be a slight background change, but I'm not sure. either way, you'll have to track it down in the browser debugger and over ride it with the css.

allan

A little CSS should do it:

table.dataTable.display tbody tr.child {
    background: white;
}
table.dataTable.display tbody tr table tr:hover {
    background: none;
}

I've also added the class child to the child row so it can be directly selected. Updated Fiddle: http://jsfiddle.net/v29ek1ob/3/ .

Possibly the DataTables stylesheet should do that built in, I'll have a little think about that.

Thanks for the test case!

Allan

tangerine

Possibly the DataTables stylesheet should do that built in

@Allan - I think that's a good idea, time permitting :-)

I vaguely remember running in to the same "problem" months ago, though I don't recall what I did about it. A built-in "child" class would be ideal.

andrewe

Thank you Allan. I figured it just needed some CSS, of which I know very little. So thanks for helping even though it was not strictly speaking a DataTables issue.