Element style modified with jquery .css is not being refreshed on Chrome

Question

I am updating the width of a select element, using .css, when occurs an onchange event. In HTML:

<select name="city_search" id="city_search" onchange='resetDropDown("#state_search");'>
<select name="state_search" id="state_search" onchange='resetDropDown("#city_search");'>

In JS

function resetDropDown(elementObj)
{
    var selectBoxWidth = $(elementObj).attr('id') == 'college_search' ? 143 : 113;
    $(elementObj).css({width:selectBoxWidth});
}

For some reason, the attribute width is correctly changed, but chrome does not show the changes until the element is inspected or page is refreshed. Is there a way to force chrome to show the changes applied on the element style?

Thanks in advance. Elizabeth

Answer 1

This problem can be solved by force the webkit to redraw/repaint the style changes. You can refer to this answer: https://stackoverflow.com/a/3485654/567101

Answer 2

Very simple solution worked for me. Try to change $(document).ready to $(window).load

The problem may be on getting the document ready. If function runs once windows loads then it may work.