cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Display resizing after keyboard is closed

SOLVED
Highlighted
Regular Member

Display resizing after keyboard is closed

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.

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Display resizing after keyboard is closed

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();
}

View solution in original post

3 REPLIES 3
Highlighted

Re: Display resizing after keyboard is closed

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

Re: Display resizing after keyboard is closed

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();
}

View solution in original post

Highlighted

Re: Display resizing after keyboard is closed

@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. 

Announcements
Join an
AR Working Group!

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection