Browser Redraw Bug workaround when using JQuery RemoveClass

I have a table in my web application and I have applied an event handler to allow the user to select data items by clicking a row in the table. To visually highlight the selected element, I give it a border. When a new row is selected, I remove the selected class (border) from the old item and add it to the new one.

My event listener code is working correctly. I checked using the Chrome developer tools, which removes the class from the old element and adds it to the newly selected element. However, the browser does not correctly remove the border after calling removeClass ().

When tested in chrome (18.0.1025.151), the newly selected item is displayed with a border, and the previously selected item still shows part of the border (the bottom and right parts of the border are still drawn). A similar drawing error occurs when I test FF 11. In firefox, the newly selected line only draws the left / right / bottom of the border, the top of which is not displayed. An event (such as a resize of the browser window) that causes the rework fixes the border drawing issue.

Does anyone have any info / links on the cause of the problem. More importantly, is there a workaround that I can implement after the user has selected a new row?

CSS class added / removed

.uiSelectedLHPlanRow { border: 1px solid purple; }

      

Html

<table id='lhPlansTable' class='uiLHPlansTable'>
</table>

      

(Table rows are added dynamically) TR format:

'<tr id=\'' + GENERATED ID + '\' class=\'uiLHPlanTableRow\'><td class=\'uiLHPlanDriverTableCell\'>' + GENERATED DATA1  + '</td><td>' + GENERATED DATA2 + '</td></tr>'

      

EVENT EVENTS

$('#lhPlansTable').on('click', 'tr.uiLHPlanTableRow', function () {

    ... flow control ...

    $('.uiSelectedLHPlanRow').removeClass('uiSelectedLHPlanRow');
    $(this).addClass('uiSelectedLHPlanRow');


    // TODO: WORKAROUND FOR DRAWING BUG ??
}

      

+3


source to share


1 answer


Similar to the problem with border-collapse;

. If you've explicitly set it border-collapse:separate;

, it works better (although you might have to tweak the style). Setting to border-collapse:collapse;

on returns the problem.

Example: http://jsfiddle.net/T2saA/3/



CSS

tr.uiSelectedLHPlanRow > td { 
    border-top: 1px solid purple; 
    border-bottom: 1px solid purple; 
}

table.uiLHPlansTable{
    border-collapse:separate;
}​

      

+2


source







All Articles