Question

I have an input box which dynamically re-sizes to appear to be the same length when a filter drop down to the left of it is changed.

I have some jQuery that calculates the width offset each time the user changes the filter from the drop down. It works correctly in IE and Firefox. But for some reason, it fails in Chrome and continues to shrink the input box.

Any idea why this happens?

Here’s a live version.

Here’s the re-sizing code:

$('#refineDropdown li').click(function() {
        var tmp = $('#refine').width();
        $('#refine').html($(this).text()); // sets the text of the button to the new selection
        $('#refine').removeClass('refineClicked'); // temp css restyling
        $("#refineDropdown").hide(); // hides the dropdown
        testLength(); // adjusts the width of the input box suggestions drop down
        $('#search').css('width', $('#search').width() + (tmp - $('#refine').width())); // calculates the new width offset and makes the adjustment
    });

function testLength() {
        if ($('#refine').text().length > 7) {
            $('#refine').html($('#refine').text().substring(0, 6) + "...");
        }
        $('#dropdown').css('width', $('#search').width() + 1);
        $('#dropdown').css('margin-left', $('#refine').width() + 13);
    }

Answer 1

I was able to fix this by changing

type="search"

to

type="text"

In your #search

Search is a webkit only input, therefore defying your styling, see here

From the above link:

WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit “no matter what”, as in, you can’t even fight against it with !important rules.