CODEWITHSUNDEEP
jquery-mobile
Michael Barber
Michael Barber

Reputation: 187

Change the width of a SINGLE JQuery Mobile Input field?

The other two answers on this question propose overriding div.ui-input-text {}

However, I have multiple input fields on this page and also within my project. So those answers won't work as they would effect everything on my page or project.

How can I modify a single text input?

A class designation in the input tag doesn't work. If I encapsulate the input with a div tag it still doesn't work. I'm trying to put an icon at the end but it seems all Jquery mobile text input takes the entire screen.

<input class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">

CSS, No Effect!
.address {
width: 200px !important;
}

Now, I could still switch to Bootstrap if that's the better way to go on this project. It seems to have .col-xs-* classes that solve this problem.

Thanks in advance.

Upvotes: 3

Views: 6263

Answers (2)

Pieter van Kampen
Pieter van Kampen

Reputation: 2077

It is maybe bit late to answer this, but maybe for others looking for the same thing (I was :-) You can put your address in a div:

<div class="myContainer">
    <label id="lbAddress">Provide the address</label>
    <input class="address" type="text" name="address" id="address" />
    <input class="address" type="text" name="Street" id="Street" />
    <input class="address" type="text" name="City" id="City" />
    <input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>

Then select your container and just the input inside that container in the CSS:

.myContainer  > .ui-input-text
    {
        width:200px;
    }

demo: https://jsfiddle.net/petitbarzun/cfazq5k5/

Reading your comments on the answer from ezanker, if you want all the inputs to appear on one line, there needs to be a container with ui-field-contain like this (the label should be there too):

<div class="ui-field-contain">
    <label id="lbAddress" style="display:none"></label>
    <input class="address" type="text" name="address" id="address" />
    <input class="address" type="text" name="Street" id="Street" />
    <input class="address" type="text" name="City" id="City" />
    <input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>

The CSS then looks like this:

.ui-field-contain  > #lbAddress~[class*=ui-input-text]
    {
        width:219px;
    }

demo http://jsfiddle.net/petitbarzun/cfazq5k5/1/

Upvotes: 0

ezanker
ezanker

Reputation: 24738

Instead of directly setting the class on the input,jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox.

<input data-wrapper-class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />

Working DEMO

Upvotes: 9

Related Questions