Recalculate Height? Can't scroll to top!

ionic-v1
1

Hi All,

I have a problem when a user selects a text box in a form and then scrolls - a huge gap appears at the bottom of the screen. See image… (there is a LOT above this on the page)

That I can live with, but now the entire page has been moved up by that much so when the user goes back to the top of the form - they get bounced back see image… (this is the absolute highest I can go)

This wasn’t a problem a couple of ionic versions ago but I had to upgrade because some checkboxes weren’t staying open. Is there some way to recalculate the page height and reset it? When I move to another tab and then back again its perfect (but I loose all the data in my model)

EDIT: Steps to reproduce:

  1. The problem seems to happen when you click on a text box and then
    the app scrolls to it. To do this the textbox needs to be lower than
    the top of the screen as seen in the next image (I clicked on
    general comments)

2.Then the screen move to focus on it like so. I clicked on done:

3.Then you notice the gap that has been created at the bottom

4.To see how far it went I scrolled down

5.Then I scrolled back up. The maximum I could go was this

6.It should have been this

Sorry for all the images but sometimes its just easier to see a problem!

2

Welcome to the world of keyboard issues with PhoneGap/Cordova/HTML5. It’s a nightmare. A few things:

What does your header look like (especially the meta tags). Needs to be something like :

Do you have the device plugin installed?

What’s your config.xml look like.

3

Hi Calendee,

Thanks for your help, I’ll go through each point in order:

This is the header:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Origin HSE</title>

    <!-- ionic css -->
    <link href="lib/css/ionic.css" rel="stylesheet">

    <!-- your app's css -->
    <link href="css/app.css" rel="stylesheet">

    <!-- angularjs scripts -->

      <script src="lib/js/ionic.bundle.js"></script>

      <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
      <script src="cordova.js"></script>
    
    <!-- 3rd party scripts -->
    <script src="bower_components/momentjs/moment.js"></script>

    <!-- your app's script -->
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    
  </head>

Yep, got the device plugin installed. I created the project using the Ionic tool and double checked just now with “cordova plugins list”

The config.xml file has remained pretty much unchanged and I am building with cordova so there are none of the PhoneGap plugin bits:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.snappyapps.origin.hse" version="0.0.1">
    <name>Origin HSE</name>
    <description>
        Origin HSE Observation Field Logger
    </description>
    <author email="sales@snappyapps.com.au" href="http://www.snappyapps.com.au">
        SnappyApps
    </author>
    <content src="index.html"/>
    <access origin="*"/>
    <preference name="fullscreen" value="false"/>
    <preference name="webviewbounce" value="false"/>
    <preference name="UIWebViewBounce" value="false"/>
    <preference name="DisallowOverscroll" value="true"/>
    <preference name="phonegap-version" value="3.1.0" />
</widget>

Any insight at all will be a GREAT help!

4

Try changing your config.xml to this :

<preference name="fullscreen" value="true" />
5

Grr!

Fiddled right around with the settings there including full screen (which I tried on its own first) and still no luck. My current config.xml’s settings are now:

<preference name="fullscreen" value="true"/>
<preference name="webviewbounce" value="true"/>
<preference name="UIWebViewBounce" value="true"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="phonegap-version" value="3.1.0" />

Is there anything else that I could have done to cause this? Its a very long form but I haven’t done too much trickery anywhere. I also just updated to the latest release and it hasn’t resolved the issue.

I guess this comes back to is there anyway to recalculate the height programmatically? I might be wrong but it feels like a JS layout thing

6

This piece of code from ionic-bundle.js describes exactly what causes the problem… We might be on to something

  //If the element is positioned under the keyboard...
  if (elementDeviceTop + elementHeight > deviceHeight) {
    //Put element in middle of visible screen
    self.scrollTo(0, elementScrollTop + elementHeight - (deviceHeight * 0.5), true);
  }

Time to get hacking!

1 Like
7

Just for anyone else who comes across this problem, I wasn’t able to nut out a solution. My client was happy with creating a second screen which actually solved the problem quite elegantly as it was a pretty long form.

8

Axe that! I solved this a while ago but forgot how I did it and found my question again.

you need to use the $ionicScrollDelegate and call $ionicScrollDelegate.resize();

That will force it to recalculate the height of the page.

http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

1 Like