Upgrade from jQuery Mobile 1.2.0 to 1.3.1 breaks input boxes

Question

I am attempting to use jQuery Mobile on a PhoneGap application for Windows Phone 8.

Currently, the application uses jQuery Mobile 1.2.0 (jquery.mobile-1.2.0.min) which works fine. However, transition support was introduced in 1.3.0 and I thus plan to upgrade to that. However, when I update to jQuery Mobile 1.3.1 (jquery.mobile-1.3.1.min), the input boxes fail to render the same way as they did.

I am not a HTML developer so I don't know much, the original code was not written by me. Here is the code for the input box:

        <label for="lumpsum">Current lump sum savings, if any ($)</label>
    <input type="number"  pattern="[0-9]*" name="lumpsum" id="lumpsum" value="2000"  style="width:50%" required/><br>

The differences:-

Do let me know if any other information is required.

Answer 1

I visited http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/ , and right clicked + select "Inspect element" on the "Text input:" field in the Google Chrome browser so that the Developer Tools split screen shows. Here you can see your original html plus the html that the jQuery Mobile 3 script adds.

jQuery Mobile 3 seems to wrap your <input> element in a <div> element with a css style class ui-input-text . This div element is styled by jQuery Mobile 3 to have 100% width , as can be seen in the right half of the Developer Tools screen. This causes the text input fields to be wider than you want.

One possible solution:

In the <input> element, remove style="width:50%"

Add this css to your html file:

div.ui-input-text {
    width: 50%;      /* desired text input field width */
    margin: 0 auto;  /* center element */
    clear: both;     /* no other elements beside this one */
}

Be careful though, changing the width in div.ui-input-text class changes the width of all of your input text fields. If you only want to change the width of text input fields on this particular <form> , you could add to the <form> a unique id, eg <form id="uniqueid"> . Now in your css this particular form can be styled like:

form#uniqueid div.ui-input-text {
    width: 50%;      /* desired text input field width */
    margin: 0 auto;  /* center element */
    clear: both;     /* no other elements beside this one */
}