Height problem in iOS7

Discontinued products DHTMLX Touch
#1

I have an app that’s designed to run on iPhone 3, 4 and 5, and iPad, all of which have different screen heights. I need to account for some users having iOS6 on their device, and some having iOS7. The problem is they handle things slightly differently when it comes to displaying the top status bar. In iOS6 the status bar is displayed above the screen content, in iOS7 it’s displayed in front of the screen content.

I’m compiling the app using Phonegap and their suggestion for coping with iOS7 is to add this code:

if (parseFloat(window.device.version) >= 7.0)
{
  document.body.style.marginTop = "20px";
}

This lowers the content (on iOS7) so anything in the top 20 pixels isn’t hidden behind the device’s top status bar, but it also pushes the content off the bottom of the screen.

If there a way to detect the height of the view and reduce it by 20px to fit, or some other way I can ensure the view fills the screen but doesn’t fall off the bottom under iOS7?

#2

You can add a row with 20px height instead of the margin:

dhx.ui({
rows:[
{ height: 20 },
{ template: “other content”}
]
})

#3

Heh, that works!

I’ve added a row to the top of the interface definition …

dhx.ui({
  rows:[
    { id:"spacer", height:20 },
    { // other items }
  ]
});

And hide it if it’s not required based on iOS version …

if (parseFloat(window.device.version) < 7.0)
{
  $$("spacer").hide();
}

Seems to have done the trick perfectly, thanks for your quick response. :slight_smile:

#4

Just an update on this … as iOS7 is now at v7.0.3 the parseFloat() function doesn’t work (because “7.0.3” is not a valid value). So what I’m doing instead (and in particular to handle cross-platform issues in apps for devices other than iPad / iPhone) is this :

First work out what type of device we’re running on.

var
  DEV_TYPE = false,  // type of device, ipad / iphone / android
  DEV_OS   = false;  // device version (ios only)

// get the device
if (/Android/i.test(navigator.userAgent)) {
  DEV_TYPE = "android";
} else if (/iPhone/i.test(navigator.userAgent)) {
  DEV_TYPE = "iphone";
} else if (/iPad/i.test(navigator.userAgent)) {
  DEV_TYPE = "ipad";
}

// get the OS version if iOS
if (DEV_TYPE == "iphone" || DEV_TYPE == "ipad") {
  DEV_OS = (navigator.userAgent.match(/\b[0-9]+_[0-9]+(?:_[0-9]+)?\b/)||[''])[0].replace(/_/g,'.');
}

Then use the OS version to decide whether to hide the spacer.

if (DEV_OS === false || DEV_OS < "7") {
  // not iOS7 - hiding spacer
  $$("spacer").hide();
}
#5

Hi Mark,

Thanks for sharing your solutions!