Skip to main content
J
jlbrenneke1-Visitor
1-Visitor
November 12, 2019
Solved

Display resizing after keyboard is closed

  • November 12, 2019
  • 2 replies
  • 2319 views

I'm working on an experience that uses multiple popups that require inputs. Once I enter the input (and the keyboard closes) and close the popup, my 2d display is shifted up, almost like it is shifting everything above where the keyboard was. This causes some widgets on top to shift off the display. Additionally, I can't click on anything, like my buttons are frozen. I can still move my model around though. 

 

This issue seems to happen when I run the experience on an iPhone 8, but did not have an issue when running on an iPad.

 

Flipping the orientation of the phone resolves the issue, but is not an acceptable solution.

Best answer by ghoofman

I also came across this issue, although it happened on the iPad as well. The solution was to scroll by 0 after an input happens. It has something to do with the fixed positioning.

 

The solution:

function setupKeyboardFix() {
 // Once the view is ready, automatically scroll by 0 to fix
 // This is beneficial when navigating to a new view
 window.scrollBy(0,0);
 
 // When the document has a blur event
 document.addEventListener('blur', function() { window.scrollBy(0,0); } );

 // When any input loses focus (blur event)
 const inputBlurFixes = document.getElementsByTagName('input');
 for(var i = 0; i < inputBlurFixes.length; i++) {
 inputBlurFixes[i].addEventListener('blur',() => {
 window.scrollBy(0,0);
 document.body.scrollTop = 0;
 });
 }
}

$scope.$on("$ionicView.afterEnter", function(event) {
 setupKeyboardFix();
}

2 replies

T
tmccombie21-Topaz I
21-Topaz I
November 12, 2019

Can you share a sample project where this is happening? I tried to reproduce with a simple project locally and was unable to. 

G
ghoofman1-VisitorAnswer
1-Visitor
February 6, 2020

I also came across this issue, although it happened on the iPad as well. The solution was to scroll by 0 after an input happens. It has something to do with the fixed positioning.

 

The solution:

function setupKeyboardFix() {
 // Once the view is ready, automatically scroll by 0 to fix
 // This is beneficial when navigating to a new view
 window.scrollBy(0,0);
 
 // When the document has a blur event
 document.addEventListener('blur', function() { window.scrollBy(0,0); } );

 // When any input loses focus (blur event)
 const inputBlurFixes = document.getElementsByTagName('input');
 for(var i = 0; i < inputBlurFixes.length; i++) {
 inputBlurFixes[i].addEventListener('blur',() => {
 window.scrollBy(0,0);
 document.body.scrollTop = 0;
 });
 }
}

$scope.$on("$ionicView.afterEnter", function(event) {
 setupKeyboardFix();
}
    C
    CliffRice1-Visitor
    1-Visitor
    April 7, 2020

    @ghoofman 's fix worked well for this keyboard resizing issue I was having as well. I would love to set up a brief chat with anyone from PTC to walk me through what each line does and why it is necessary. But I am not sure if there is a system in place to do that. @tmccombie would this be possible? My application is by no means simple, but if it helps I could create a simple application to replicate this issue. 

    Terms & ConditionsAccessibility statement