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>

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
to the component, but no success)


Here is the live demo:

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