title: Jquery Mobile Iscroll Header hiding when focus in text field in IOS?
body: <p>Jquery Mobile Iscroll Header hiding when focus on text field form in IOS app  .</p>
  
  <p>How to make fixed header while focus to text field when keyboard appears. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="format-detection" content="telephone=no" /&gt;
      &lt;!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --&gt;
      &lt;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" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
      &lt;link rel="stylesheet" href="js/jquery.mobile-1.4.2.css"&gt;
  
          &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript"&gt;
              &lt;/script&gt;
          &lt;script src="js/iscroll.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;style type="text/css"&gt;
              * {
                  -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;
          } 
  
  
  
              &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
  
          var myScroll;
  
          function loaded () {
              myScroll = new IScroll('#wrapperGemini', {
                                     scrollbars: true,
                                     mouseWheel: true,
                                     bounce:false
  
                                     });
          }
  
      document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
          &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="loaded();"&gt;
      &lt;div data-role="page" &gt;
          &lt;!--  data-position="fixed"  --&gt;
          &lt;div data-role="header" data-position="fixed" data-transition="none"  data-tap-toggle="false"  data-theme="b" &gt;
              &lt;h1&gt;INDEX PAGE&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content" &gt;
              &lt;div id="wrapperGemini" &gt;
                  &lt;div id="scroller"&gt;
                      &lt;p&gt;some content that will be scrolled&lt;/p&gt;
                      &lt;p&gt;Some more content that will be scrolled&lt;/p&gt;
                        &lt;input type="text" placeholder="1" /&gt; 
                      &lt;input type="text"  placeholder="2" /&gt; 
                    &lt;input type="text" placeholder="3" /&gt; 
                     &lt;input type="text" placeholder="4" /&gt; 
                     &lt;input type="text" placeholder="5" /&gt;
                      &lt;input type="text" placeholder="6" /&gt; 
                       &lt;input type="button" value="GO!!!" /&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-role="footer"    data-position="fixed" data-transition="none" data-tap-toggle="false"  data-theme="b" &gt;
              &lt;h1&gt;My Footer&lt;/h1&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="phonegap.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>How to display header fixed when keypad appears?</p>