CODEWITHSUNDEEP
cssjquery-mobile
siva636
siva636

Reputation: 16441

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

Upvotes: 1

Views: 2108

Answers (2)

campino2k
campino2k

Reputation: 1661

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.

Upvotes: 2

Giona
Giona

Reputation: 21114

I'm not sure what you're asking for, but if you want the "message" to be closer to the styled select, add this rule in your CSS:

.ui-field-contain .ui-select {
    width: auto !important;
}

just change auto to the desired amount.

Upvotes: 1

Related Questions