Question

So I’m a real novice when it comes to Jquery Mobile developement and I was wondering if anybody out there could help me understand one small aspect of the JQM library.

My problem is related to page content and the iOS keypad in particular. I have several pages with content that varies in size. For example, on one page I have five input fields and the next page I have only four. When I use the iOS “next” button to navigate between different fields and I end up at the last field, the footer appears automatically above the keypad which is ideally what I need.

However, on the next page with only four input fields, when I use the “next” button to navigate between the fields and i end up on the last field, then the footer does not appear directly above the keypad and on top of that, a white space is produced between the last input field and the footer once the keypad dissapears.

Any ideas why this happens? I’m guessing it has something to do with page content but I am not sure. I’ve attached an image to show you what happens when the keypad is de-activated.

<div data-role="page" data-theme="f" id="some id">
        <div data-role="header">
            <a href="#some href" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
            <h1>Text</h1>
            <a href="#some href" data-icon="arrow-r" data-iconpos="notext"></a>
        </div>
<div data-role="content">
        <label for="some label">Text</label>
        <select name="some name" id="some id">
            <option value="Default">Select </option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
        <label for="some label">Text:</label>
        <select name="some name" id="some id">
            <option value="Default">Select  Status</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
        </select>
        <label for="some label">Text (YYYY-MM-DD):</label>
        <input type="date" name="some name" id="some id" value="" class="required"/>
        <label for="some label">Text (YYYY-MM-DD):</label>
        <input type="date" name="some name" id="some id value="" class="required"/>

    </div>
    <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height: 42px;">
        <a href="#some href" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a>
    </div>
</div>

Answer 1

This looks closely related to iOS6, UIWebView and position:fixed – not exactly the same as you actually want the footer moving, but probably related to the timing of the height update.

You can probably fix the issue by overriding the position changes jquery mobile makes from javascript. That script is there because jquery mobile also supports older browsers which do not handle fixed positioning natively. If you only need to support the latest version of iOS, you can get a better result using pure CSS.