Я пытаюсь использовать JQM в проекте Phonegap для создания фиксированного верхнего и нижнего колонтитула в приложении iOS. У меня есть страница, которая использует сворачиваемые DIV и имеет текстовый ввод внутри DIV. Все хорошо с верхним и нижним колонтитулами, пока я не разверну DIV и не введу что-то в текстовое поле. После того, как я отклонил клавиатуру iOS, верхний колонтитул переместился вверх и перекрывается «информационной» панелью iPhone, а нижний колонтитул также сдвинулся вверх на странице и больше не фиксируется в нижней части. Если после этого я разверну другой свернутый DIV, нижний колонтитул вернется в правильное положение, но верхний колонтитул останется наверху экрана. Есть идеи, что происходит?

Код страницы JQM:

<div data-role="page" id="wizard_3">
    <div data-role="header" class="header" data-id="cls_header">
      <h1>
        <label>Testing&reg;</label>
        testProgram&reg;</h1>
    </div>
    <div data-role="content">
      <div data-role="collapsible-set" id="ability_set">
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion1" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion1Header">XXXXXXX </h3>
          <p id="abilQuestion1Text">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability1" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion2" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion2Header">XXXXXXX</h3>
          <p id="abilQuestion2Text">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability2" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion3" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion3Header">XXXXXXX</h3>
          <p id="abilQuestion3Text">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability3" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion4" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion4Header">XXXXXXX</h3>
          <p id="abilQuestion4Textr">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability4" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion5" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion5Header">XXXXXXX</h3>
          <p id="abilQuestion5Text">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability5" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestionn6" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion6Header">XXXXXXXX</h3>
          <p id="abilQuestion6Text">XXXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability6" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
    <div id="footer" data-role="footer" data-position="fixed" class="ui-bar footer"  data-theme="b"> <span class="leftButton">
      <input type="button" class="leftButton" data-theme="b" data-icon="arrow-l" value="Back" onClick="goBack(2)"/>
      </span> <span class="rightButton">
      <input type="button" class="rightButton" id="wizardNextButton_3" data-theme="b" data-icon="arrow-r" value="Coninue to Step 3" onClick="javascript:wizardDecision(3, true); return false"/>
      </span> </div>
  </div>