Issue with Disappearing “Outline” attribute on Table Row

Geoff_Olding

Hello there

I have a strange issue with a disappearing “outline” property on a table row. I appreciate this may not be a jquery datatables issue, however I have posted it in case it is, or if anybody here happens to have come across it before, or could recommend an appropriate forum.

I have a table where the currently selected row (“tr” element) is assigned the class “SigMania_row_highlight_style” to display a purple border around the entire row:

.SigMania_row_highlight_style {
 outline: #6300AB 1px solid;
}

<tr class="SigMania_row_highlight_style odd" role="row">

The JQuery Datatables plug in adds the “odd” class and the role.

When the user hovers over another row, I dynamically add the class “SigMania-menu-popup-hover” to the other row:

    $("tr").hover(
        function () {
            $(this).addClass(sRowHoverStyle);
        },
        function () {
            $(this).removeClass(sRowHoverStyle);
        }
    );

.SigMania-menu-popup-hover {
   background-color: #F0E9F5 !important;
}

I am taking no action on the currently selected row.

When I do this, the purple outline disappears for reasons unknown. The Html for the row is not changed – I can verify this from developer tools. Moreover, I can refresh the display (for example by just unsetting and then setting back on any property of the row from developer tools), and the outline comes back.

I am fairly sure this is an issue with Internet Explorer (I get the same issue with all versions of IE and Edge, but not in FireFox). I don’t get the same issue when I use the same technique on a user list.

Any help greatly appreciated.

colin

Hi @Geoff_Olding ,

I just tried it here, and it seems OK with Chrome. It might be worth trying this example in IE and see what it does.

Cheers,

Colin

allan

I've just tried this ( http://live.datatables.net/wutimimu/1/edit ) in both IE11 and Edge.

Works fine in Edge, but no question that there are rendering issues in IE. The outline is removed whenever the hover class is toggled. Even if you just use CSS's :hover to change the background colour rather than Javascript controlled classes, its the same issue.

I fear that's an IE rendering issue.

Allan

Geoff_Olding

Many thanks for your reply.

In the end I resolved my issue with the assistance of this forum post - https://social.msdn.microsoft.com/Forums/windowsapps/en-US/3c9d8dd9-a9b1-4192-9608-4ef5fc066632/issue-with-disappearing-8220outline8221-attribute-on-table-row?forum=iewebdevelopment

Regards
Geoff Olding