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