Inline form fields: search box and button in jQuery-Mobile

Question

This is what I am trying to achieve:

This is what I get:

Please view the JSFiddle of this with web-kit browser (Chrome or Safari): http://jsfiddle.net/KqEqN/

This is happening when you narrow the screen but there's still visibly enough space for the button. I've looked into CSS trying to find some sort of padding to the right of the button but couldn't. Also where the hell that horizontal line comes from?

Answer 1

I'm not familiar with jQuery Mobile, so I might be doing this wrong. My guess is that you must add extra classes instead of overriding jQuery Mobile's theme.

The fix involves:

.ui-input-search {
    width: 50px;
    display: inline-block;
}

Check it in action here: http://jsfiddle.net/NqFhQ/