Ionic app only in portrait

Hi I added some plugins and added some ionic- modules. After that the IOS version of my app starts always in portrait orientation and cant be change to landscape.The Android version works as before. Landscpae or Portrait if you wish.
I search on internet. I couldnt find a solution for this weird problem. Anybody…???
BTW I removed the plugins. Did not solved the problem.

Is this in your config.xml?

<preference name="Orientation" value="portrait"/>

If it is remove it :slight_smile: I’m also not sure if Ionic supports landscape on iOS.

No it is not. I allready read about this preference. If so I expect that both platforms will locked in portrait.

@mhartington Any suggestion here???

If you need them both locked in portrait, then add that preference.

No no. I need orientation how you want it. Landscape and Portrait.
The app always worked like that.

Hi I’m one step in the right direction. In xcode you can specify the orientations the app may run. This is working fine. But when I run ionic prepare ios, these settings are turned off.
I know the config.xml in the root of the app is the base for config of platforms. But I cant find why these orientation are changed.
There is no orientation preference in my config.xml
settings are turned off.

Anybody a suggestion…??

So you need your ios app to be useable in landscape and portrait?

Add this to your run phase

function shouldRotateToOrientation(degrees) {
return true;
}

Its a hidden bit of code that cordova has.
http://cordova.apache.org/docs/en/5.0.0/config_ref_index.md.html#The%20config.xml%20File

@mhartington Thanks for reply on this. What do you mean by: Add this to your run phase? I put his in the app.run file in my app. I was wondering who is gonna fire this function.

Just to make the problem more clear. The app always run in landscape and portrait. From the beginning I build it. Suddenly a few days ago running by xcode starts in portrait and you are not able to turn it in landscape. Like I said: this is because in xcode in the projectpage of the app => Deployment Info the 4 selectboxes ‘Device Orientation’ are deselected after I run ionic prepare ios. Even worse I see the projectpage disappear compleet by running ionic prepare ios. After bringing back by clicking on the project in xcode the selectboxes are deselected.

@mhartington Mike I made a brand new app created with : ionic start ios blank. Add platform ios, run ionic prepare ios. Here happens the same, except the projectpage is not vanished compleet. But just the 4 ‘Device Orientation’ selectboxes are cleared.

@mhartington Maybe it has something todo with permissions. After I make an app and run ionic prepare ios, open the app in xcode, xcode complains about I don’t have permissions to edit some files in xcode. What I do then is to change only red permissions on the directory to Read and Write permission.

function shouldRotateToOrientation(degrees) {
  return true;
};
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

My mistake, I meant to put as a global function. This actually gets called inside of the cordova.js once on the device.

You may also needs some extra css to fix the header bar.

@media only screen and (orientation: landscape) {
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
    height: 44px;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
    margin-top: 19px !important;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
    margin-top: 0px;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs,
  .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
    top: 44px;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .has-header,
  .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
    top: 44px;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
    top: 88px;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .has-header.has-tabs-top {
    top: 93px;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top {
    top: 137px;
  }
}

The easiest way us to set the orientation in Xcode for iOS. Open the app in Xcode, and in the top center click on Build Settings. (May already open to that view by default.) You will see in the center pane a setting for orientation. You will need to add the landscape to one of the choices.

If you are not using xocde, open the the .plist file in the platforms/ios folder. You will find the setting in that file as well.

@mhartington Mike we are talking about two different things now.

The issue is that in xcode the 4 selectboxes on page General of the project are deselected by:

ionic prepare ios

The result is there is no default Device orientation. So the app starts in portrait. It is impossible to change portrait into landscape. Nor by turning the device by hand neither by code in the app.

No we’re talking about the same thing.
I am aware that the checkboxs are unchecked.

But the function still handles the orientation change.

I tried your code. It works like expected. But…

Ok It’s me to be confused. Let me try to explain.
I am devellopping an app for almost a year now. The app always started in the orientation the device is held. Then you could change orientation by turning the device like you want.

Some days ago after some small changes, a build the app and suddenly the app starts in portrait with holding it in landscape. Now you can turn it what you want it remain in portrait. I restored from timemachine some older versions, even from 3 months ago. After building all starts in portrait. So my conclusion was this has nothing to do with the app. So I started to investigate how I can get the ‘normal’ behavior back. With normal I mean starting the app in whatever orientation and switch to whatever orientation by turning the device. The only way I get this ‘normal’ behavior back is switching these checkboxes on. But like I said. They are turned off by: ionic prepare ios. This is annoying, because if I forget to turn them on for a release build, I re-publish the app with the portrait thingy.

BTW thanks for your patience and help

@mhartington Same issue here. The splash screen only starts from portrait mode when the app launches, even if user holds the device by landscape. But, after user launches the app, by changing device orientation, the app is rotating correctly.

For me this happende only in IOS. Caused by some parameters in xcode. In tab General ther are some checkboxes for portrait en landscape. Default for xcode is all unchecked, result is app only running in portrait. These checkboxes are reset to default after the app is refereshed by eg cirdiva prepare or build.
Now I turn them to kn on every cordiva prepare. So I think this is not to blame Ionic but there something changed in xcode. My opinieonderzoek is xcode should not change this checkboxes. The user should decide whether these checkboxes should be on or if.

I know this is old, but in case anyone else is having this problem.
The cordova config.xml documentation has an explanation