Question

I have a problem with the automatic layout of jquery mobile:

i have a form with fieldsets:

<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>Test</h3>
    <div data-role="fieldcontain">
       <label for="TextInput"> Textinput </label>
       <input type="text" name="TextInput" id="TextInput">
    </div>

    <div data-role="fieldcontain">
       <label for="ButtonInput"> Button </label>
       <a href="javascript:alert('works')" data-icon="arrow-r" data-role="button" data-iconpos="right">
          <label id="ButtonInput" name="ButtonInput"> Testvalue </label>
       </a>
    </div>
</div>

On Displays with a lower resolution everything work fine. The labels are shown in the first row, the inputs are shown in the second row:

Textinput
[Inputbox]

Button
[Button]

On Displays with a higher resolution, the input field and the label are shown in 1 row

Textinput       [InputBox]

but the Button is still shown in 2 Rows:

Button
[Button]

Anyone knows the problem?

Answer 1

This is not an error, jQM was build to act like that.

If you want to fix it just use this simple css:

#TextInput {
    width: 100% !important;
}

working example: http://jsfiddle.net/Gajotres/xrVU2/