siva636 siva636 - 1 year ago 52
CSS Question

jQuery Mobile <select/> style issue

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:
enter image description here

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download