how to prevent navigation bar scroll when keyboard show in ios

[Arthur_T_]

it just happen in iphone with this settings:

ios 10.1.1

iphone 7

ok on this iphone settings: (i.e. navigation bar won't scroll out when keyboard is shown)

ios 9.3.2

iphone 6 plus

intelxdk.config.additions.xml with this settings:

<platform name="ios">
    <!-- prevent screen scrolling for the whole app -->
    <preference name="DisallowOverscroll" value="true"/>
    <preference name="KeyboardDisplayRequiresUserAction" value="false"/>

P.S.

ok on android device (i.e. navigation bar won't scroll out when keyboard is shown)

[Arthur_T_]

forget to state, it is using framework7

[PaulF_IntelCorp]

Arthur -- please search the forum, there have been several questions recently asking the same question. Try a search like this "intel xdk forum scroll ios iframe" using google.

[Arthur_T_]

sorry, can't find any relevant result with search "intel xdk forum scroll ios iframe" in this forum.

In fact, I did search on this forum about my issue before this post but there is no relevant and even I added the style: overflow: hidden to body tag after display the target screen. The navigation bar still scroll out of the screen when keyboard show in my iPhone7 iOS 10.1.1 As it only happen in iPhone7 iOS 10.1.1 (not sure which one is the cause of the problem, iphone7/ios version), that's why I suspect is something not handle these latest release properly.

If you have the post url that relevant to my question, could you directly post it here? Thanks in advance.

[PaulF_IntelCorp]

• https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/#post-169890
• https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=making+an+iframe+scroll+in+ios+cordova+phonegap+app

[Arthur_T_]

no help

here are what I tried:

1.  base on your first link: https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/#post-169890, I added this code in onPageInit()

$(".page").css({"-webkit-overflow-scrolling":"touch", "overflow":"auto"});

and the page output as this too

 <div class="page navbar-fixed" data-page="xxx" style="-webkit-overflow-scrolling:touch; overflow:auto;">

2. base on your second link https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=making+an+iframe+scroll+in+ios+cordova+phonegap+app, all related to iframe, but my problem is my page scroll including the navigation bar after keyboard show, but I don't want it.

[Arthur_T_]

I found the solution:

- add plug-in: Ionic Keyboard

- run this js once

window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardShowHandler(e){
   var element = $("#keyboardPadding");
   if (element.length) {
      element.attr("height", e.keyboardHeight + "px");
   }
}

function keyboardHideHandler(e){
   var element = $("#keyboardPadding");
   if (element.length) {
      element.attr("height", "1px");
   }
}

cordova.plugins.Keyboard.disableScroll(true);

- as scrolling disabled, if the screen is not long enough to scroll up after keyboard show, then you can't scroll up the screen (navigation bar won't scroll up as cordova.plugins.Keyboard.disableScroll(true);) to see the input field, so I added this html code at the end of the page for padding enough space when keyboard show and back to 1px height after keyboard hide (done by js):

<table width="100%" height="1px" id="keyboardPadding" style="border:0;"><tr><td>&nbsp;</td></tr></table>

[Thomas_H_6]

Hey Arthur T.

Can you explain me, where i can insert this code? Ive made a game with construct2, where iam using iframe. And i have exact this problem with keyboard scrolling. You can find my description with this link:

https://www.scirra.com/forum/viewtopic.php?t=192757

But basically it would help me a lot if i would know where to include your code.

Thank you very much!