Change the width of a SINGLE JQuery Mobile Input field?

Question

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.

score 9 · Accepted Answer · answered May 14 '15 at 22:22

9

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

answered May 14 '15 at 22:22

ezanker

24,628
1
20
35

That looks great! However, the main reason I was doing this was I was trying to get the Icon basically to show up at the end of the input text and its automatically doing a line break. the idea was keeping the gui consistent with the text input going full length "less" the icon at the end. display:inline is not working either. – Michael Barber May 14 '15 at 23:14
@MichaelBarber, if you just want the button to the right, you can add a float: left to the address class. If you want the input to automatically fill the width minus the button, a table works well for this: http://jsfiddle.net/ezanker/an22axex/3/ – ezanker May 15 '15 at 01:28
Ok, I can't get to your jsfiddle links, it just hangs. The table makes sense on its face though; however, I was told we as designers were suppose to stop using tables for positioning and only for grid data so never considered it. – Michael Barber May 15 '15 at 15:41
@MichaelBarber, i think jsFiddle site is temporarily down. If you really hate the idea of using tables, you can accomplish the same thing with DIVs and CSS: http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid – ezanker May 15 '15 at 16:11
Yeh, it looks to be the case. I personally don't. – Michael Barber May 15 '15 at 16:22

Pieter van Kampen · Answer 2 · 2015-12-08T19:56:07.697

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/

Change the width of a SINGLE JQuery Mobile Input field?

2 Answers2