Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
like image 817
Gaurav Kumar Singh Avatar asked Mar 07 '17 12:03

Gaurav Kumar Singh


1 Answers

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

like image 132
Utkarsh Dubey Avatar answered Nov 03 '22 05:11

Utkarsh Dubey