Not able scroll to input in ionic app when focus on input in phone

14,022

Solution.1 Can you try to create a double click event on which change the position of form to be static? That may take your footer to top position.

Solution.2 Using CSS apply overflow-y: scroll; on the form.

Solution.3 You can also try to remove preference <preference name="fullscreen" value="true" /> in config.xml file.

I had the same issue and I resolve it using Solution.2.

Here is a link -- Keyboard Hiding Inputs Problem

Share:
14,022
Gaurav Kumar Singh
Author by

Gaurav Kumar Singh

Lead Software Engineer | Frontend

Updated on June 26, 2022

Comments

  • Gaurav Kumar Singh
    Gaurav Kumar Singh almost 2 years

    Predefined phone functionality: When we focus on any input it will automatically scroll to that input in mobile device.

    Problem: Its not working in my ionic app, because of horizontal scroll also there, so when i click on input in mobile device, it is not scrolling automatically to that input and input hides behind the keyboard.

    I have tried delegate-handle for this, but it's not working.

    Plunker for the same

    HTML

    <ion-scroll direction="xy" class="scroll" delegate-handle="nomineeDiv">
        <div class="table-row" ng-repeat="data in nominee"><!-- Multiple div show horizontally -->
            <form name="data.formName">
                <!-- Long vertical form
                .....
                .....
                after 4 input tags --> 
                <input type="text" name="something"/>
                <!-- Need to scroll to input when input focused -->
            </form>
        </div>
    </ion-scroll>
    

    Controller

    $ionicScrollDelegate.$getByHandle('nomineeDiv').scrollBy(580, 140, true);