Jquery Mobile Iscroll Header hiding when focus in text field in IOS?

Question

Jquery Mobile Iscroll Header hiding when focus on text field form in IOS app .

How to make fixed header while focus to text field when keyboard appears.

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    <link rel="stylesheet" href="js/jquery.mobile-1.4.2.css">

        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript">
            </script>
        <script src="js/iscroll.js" type="text/javascript"></script>

        <style type="text/css">
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }



        body {

            overflow: hidden; /* this is important to prevent the whole page to bounce */
        }


        #wrapperGemini {
            position: absolute;
            z-index: 1;
            top: 45px;
            bottom: 20px;
            left: 0;
            width: 100%;
            overflow: hidden;
        }

        #scroller {
            position: relative;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        } 



            </style>
    <script type="text/javascript">

        var myScroll;

        function loaded () {
            myScroll = new IScroll('#wrapperGemini', {
                                   scrollbars: true,
                                   mouseWheel: true,
                                   bounce:false

                                   });
        }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
        </script>

</head>
<body onload="loaded();">
    <div data-role="page" >
        <!--  data-position="fixed"  -->
        <div data-role="header" data-position="fixed" data-transition="none"  data-tap-toggle="false"  data-theme="b" >
            <h1>INDEX PAGE</h1>
        </div>

        <div data-role="content" >
            <div id="wrapperGemini" >
                <div id="scroller">
                    <p>some content that will be scrolled</p>
                    <p>Some more content that will be scrolled</p>
                      <input type="text" placeholder="1" /> 
                    <input type="text"  placeholder="2" /> 
                  <input type="text" placeholder="3" /> 
                   <input type="text" placeholder="4" /> 
                   <input type="text" placeholder="5" />
                    <input type="text" placeholder="6" /> 
                     <input type="button" value="GO!!!" /> 
                </div>
            </div>
        </div>
        <div data-role="footer"    data-position="fixed" data-transition="none" data-tap-toggle="false"  data-theme="b" >
            <h1>My Footer</h1>
        </div> 
    </div>

    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

</body>

How to display header fixed when keypad appears?

You can't control it, it hides on focus to prevent other possible crashes on different platforms. — Omar, Mar 11 '14 at 07:15
This question is not related to Worklight; in worklight you do not use "index.js" or "phonegap.js", as well as your HTML missing various Worklight-related framework references. Once this HTML follows what a Worklight app is like, add the tag. — Idan Adar, Mar 11 '14 at 17:51

score 1 · Answer 1 · edited May 23 '17 at 12:13

1

My suggestion is Use iScroll for resolve this issue

position: fixed not to play well on iOS - Check it

Check these SO Questions for your reference!

CSS “position: fixed;” into iPad/iPhone?

Fixed positioning in Mobile Safari

edited May 23 '17 at 12:13

Community

1
1

answered Mar 11 '14 at 06:41

ULLAS MOHAN.V

1,521
1
19
36

Jquery Mobile Iscroll Header hiding when focus in text field in IOS?

1 Answers1