keyboard block textbox jquery mobile - jquery-mobile

Question

Hi i am new for jquery mobile.I am developed a mobile app which use together with jquery mobile and phonegap i facing a problem nw. When keyboard is popup , it block my textbox. Please c my code below
phonegap AndroidManifest.xml
<activity
android:name="com.example.smartrealtor.MainActivity"
android:label="SmartRealtor"
android:windowSoftInputMode="adjustPan"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:hardwareAccelerated="true"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Jquery mobile.html
<!-- Tab 1 -->
<div id="nPersonal">
<!-- POP UP-->
<div data-role="popup" id="popupGallery" data-overlay-theme="b" style="background-color:white">
<p class="note2">Choose to take photo with camera or take picture from gallery</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn-transparent ui-btn-icon-top ui-icon-takephoto ui-nodisc-icon" id="cameraBtn">
<br>
<br>
Take Photo<br>
</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn-transparent ui-btn-icon-top ui-icon-opengallery ui-nodisc-icon" id="galleryBtn">
<br>
<br>
Open Gallery<br>
</a>
</div>
</div>
</div>
<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
Close<img id="imgLarge" alt="Photo portrait">
</div>
<!-- /POP UP-->
<div data-role="popup" id="popupSave" data-overlay-theme="b" style="width: 250px; height: 150px; align-content: center;">
<div data-role="header">
<h1>Record</h1>
</div>
<p class="note">Are you confirm to save?</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a">Cancel</a>
</div>
<div class="ui-block-b">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" id="btnSave" data-transition="none">Confirm</a>
</div>
</div>
</div>
<!-- /POP UP-->
<!-- Agent Detail -->
<div class="ui-grid-a loan">
<ul data-role="none" data-inset="true" class="login_from transparentForm">
<strong>Contact Information</strong>
<div style="text-align: center; display: block; width: 100%; height: 120px; border-bottom: 1px solid #dbdbdb">
<span style="font-size: 12px; text-align: center; color:#fff">Take Picture</span>
<div class="file-upload">
<img id="imgContactPic" style="width: 100px; height: 100px" />
</div>
</div>
<li>
<label>Name </label>
<span>
<input type="text" name="customername" id="txtCustomerName" data-role="none" required />
</span>
</li>
<li>
<label>Contact No. </label>
<span>
<input type="number" name="customerhpcontact" id="txtCustomerHPcontact" data-role="none" required>
</span>
</li>
<li>
<label>Date of birth </label>
<span>
<input type="date" data-role="none" id="txtDOB">
</span>
</li>
<li>
<label>Email</label>
<span>
<input type="email" name="customeremail" id="txtCustomerEmail" data-role="none">
</span>
</li>
<li>
<label>Address</label>
<span>
<input type="text" name="txtAddress" id="txtAddress" data-role="none">
</span>
</li>
<li>
<label>Occupation</label>
<span>
<input type="text" name="customeroccupation" id="txtCustomerOccupation" data-role="none">
</span>
</li>
<li>
<label>Category</label>
<span>
<div class="ui-field-contain">
<select name="select-native-1" id="ddlCategory" data-role="none" class="infoSelect" required>
<option value>Select Categories</option>
<option value="B">Buyer</option>
<option value="T">Tenant</option>
<option value="S">Seller</option>
<option value="I">Investor</option>
</select>
</div>
</span>
</li>
</ul>
</div>
<!-- /Agent Detail -->
</div>
<!-- /Tab 1 -->
</form>
</div>
I also try setting android:windowSoftInputMode="adjustResize" but, the adjustresize break my page css. My page, header and footer will jumping , once the keyboard appear
Please help. thanks