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

Question

This is what I am trying to achieve:

enter image description here

This is what I get:

enter image description here

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?

also for the added line, remove this attribute: data-role="fieldcontain" from the div and the line(s) will go away — Phill Pafford, Jul 12 '11 at 16:36

methodofaction · Accepted Answer · 2011-07-12T19:36:09.030

4

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/

edited Jul 12 '11 at 19:36

answered Jul 12 '11 at 16:26

methodofaction

70,885
21
151
164

1

The `display` directive is enough; the border goes if you remove the `data-role` attribute, as @Phill Pafford says. – Ben Jul 12 '11 at 18:19
Thanks Ben, removed the css declaration for the line. – methodofaction Jul 12 '11 at 19:37

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

1 Answers1