Question

Consider the following code:

<div data-role="fieldcontain">
    <label for="name">Car</label> 
    <select data-inline="true" data-theme="b">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select> 
    <span>message</span>           
</div>

The output as follows:

There is a big gap between the component and the message. How can I reduce this gap to a desired amount?

(I tried applying CSS such as width:100px to the component, but no success)

EDIT :

Here is the live demo: http://jsbin.com/icikif/1

Answer 1

The reason can be found in the CSS of jQm:

@media (min-width: 450px)
.ui-field-contain .ui-select {
width: 78%;
display: inline-block;
}

Add a custom Stylesheet and overwrite the width setting.