Clever Geek Handbook

JQuery Mobile 1.4.5 virtual keyboard in device hides form input at the bottom of the page

I am using JQuery Mobile 1.4.5 to build a web app. I found an issue which I am pretty sure is a browser or JQM bug when using Google Chrome full screen in Android full screen (v.4.4.2).

When I click on

Press here!

collapsed title and select a text area, the keyboard appears, but it hides the text input box because it is in the bottom half of the screen. This prevents the user from knowing what they are typing and hitting "Submit" unless they minimize the keyboard.

When the keyboard is opened, the text box needs to be moved up, so it sits above the keyboard and the page should scroll. This is the behavior I expect, and what happens in Chrome Browser Mode, and Browser and Browser Full Screen.

Any ideas for a working round for this? This makes sections of the application unusable!

<!DOCTYPE html>
 <html>
    <head>
      <title>Test Page</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png" /> 
        <link rel="shortcut icon" href="apple-touch-icon.png" />
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/>

        <script src="./js/jquery.js"></script>
        <script src="./js/jqm1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.external-png-1.4.5.min.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.inline-png-1.4.5.min.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.inline-svg-1.4.5.min.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile-1.4.5.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/Theme.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.icons-1.4.5.min.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.structure-1.4.5.min.css">

</head>
<body>
    <div data-role="page" id="index" data-theme="a" >
        <style>
        .ui-title {
          margin: 0em 15% 0em !important;
        }
        </style>
        <div data-role="header" data-theme="a" data-position="fixed" style="min-height: 40px;">
            <a href="#navigation" style="margin-left: 3px; margin-bottom: 3px;" data-icon="bars" data-iconpos="notext">Navigation</a>

                    <h1 style="white-space:normal;">test</h1>


                <a href="#search" style="margin-right: 3px; margin-bottom: 3px;" data-icon="search" data-iconpos="notext">Search</a>
        </div><!-- /header -->



        <div data-role="content">


            <div data-role='collapsible-set' data-corners='false' >
                    <div data-role='collapsible' data-theme='b' data-collapsed='false'><h2>1</h2>
                    </div> <!-- collapsible end -->

                    <div data-role='collapsible' data-theme='b'><h2>2</h2>          
                    </div> <!-- collapsible end -->

                    <div data-role='collapsible' data-theme='b'><h2>3</h2>
                    </div> <!-- collapsible end  -->

                    <div data-role='collapsible' data-theme='b'><h2>4</h2>
                    </div> <!-- collapsible end  -->

                    <div data-role='collapsible' data-theme='b'><h2>5</h2>
                    </div> <!-- collapsible end -->

                    <div data-role='collapsible' data-theme='b'><h2>6</h2>
                    </div><!-- collapsible end -->  

                    <div data-role='collapsible' data-theme='b'><h2>7</h2>
                    </div><!-- collapsible end  -->


                    <div data-role='collapsible' data-theme='b'>
                        <h2>Click Here!!</h2>
                            <form>
                                <textarea cols='40' rows='auto' style='height:100px;' name='newNotes' id='newNotes'></textarea>     
                                <input type='submit' id='Submit'  value='Update' class='ui-btn ui-btn-c ui-btn-inline' data-theme='c' data-transition='pop' />
                            </form>
                    </div><!-- collapsible end -->

            </div> <!-- close collapsible set -->   
        </div><!-- /content -->
    </div><!-- /page -->
</body>

+1


source to share


2 answers


I opened an issue with JQM and this is the answer I got. It turns out this is a Chrome browser bug in full screen mode, has nothing to do with JQM ...

The only way I could try to get around this is with something like http://jsbin.com/kagidi/9/edit?html,css,output , which fixes the issue on the Chrome home screen, however this is actually is not a complete solution, it has several problems that cannot be resolved.

There is no way to know the size of the keyboard, nor tell you how much height to add to the body, on a specific device, much less if you mean custom keyboards.



It takes a lot of userAgent sniffing for it to work fine

Because of these issues, this is not something we would add to the library, I don't think. However, this may solve your problem.

0


source


This appears to be a problem on Android.

https://github.com/jquery/jquery-mobile/issues/1079



The answer to this link is to turn off full screen mode of the page. (Mentioned twice as work.)

0


source






More articles:


All Articles