0

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">
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><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

user998405
  • 1,309
  • 3
  • 40
  • 80

0 Answers0