Config .xml Preference Orientation not working for IOS


#1

Hi,

I just started using ionic framework and would like to know how do I set the orientation of the ionic app for android and ios either to: portrait, landscape or both (portrait and landscape)?

I tried changing config.xml

  • <preference name="orientation" value="landscape" />

  • <preference name="orientation" value="default" />

and none of them worked. It is always in portrait mode.

I used both CLI ionic and cordova for IOS and I found out that both CLI is not changing:

<key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> </array> <key>UISupportedInterfaceOrientations~ipad</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> <string>UIInterfaceOrientationLandscapeRight</string> </array>

I am using Ionic CLI version 1.0.14 and Cordova CLI version 3.5.0-0.2.4.
I am using Ionic 1.0.0-beta.8

Is this a bug in Ionic or Cordova? How do I fix this?

Thanks.


#2

Hmm where have you set this? In the config.xml at the project root?

Have you run this command

cordova prepare

After making the changes the config file?


#3

I setup the config.xml in the root. Please see screenshot.

I tried cordova prepare and still the same result. Please see screenshot.


#4

Hm, very odd. Definitely a cordova issue. For iOS, you may have to open up Xcode and set that there.


#5

Thanks for the reply.

Will this be fixed in later versions of Ionic?


#6

Well its a cordova issue, so not much we can do really. You might have a better chance of getting this resolved if you bring this up to the cordova people


#7

@sdonyh I am experiencing the same problem. Any feedback on how you fixed this ?
Any help will be appreciatted.


#8

This is also an issue for me. I understand that it IS a cordova issue, but if anyone here has a good workaround, I’d love to hear it.


#9

@sdonyh the O in orientation should be capitalized . Give that a try


#10

Actually I’m not sure if that’s the issue… The docs have it as capitalized and so is my implementation, however after looking into the cordova CLI library (cordova/metadata/) the ios_parser.js file doesnt look for orientation, while android/amazon fireos/firefoxos do, so this may be a cordova bug.

In the meantime, I created a cordova hook which got published in the new version of the yeoman-ionic generator called update_platform_config. I also have some docs on how you can add some configuration to your config.xml which will modify your plist value…

By using the hook, you should be able to add the following to your config.xml and update the config as you would like to see it. I would only go this route if it’s a confirmed Cordova bug though.

<platform name="ios">
    <config-file platform="ios" target="*-Info.plist" parent="UISupportedInterfaceOrientations">
        <array>
            <string>UIInterfaceOrientationPortrait</string>
        </array>
    </config-file>

    <config-file platform="ios" target="*-Info.plist" parent="UISupportedInterfaceOrientations~ipad">
        <array>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationPortraitUpsideDown</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
        </array>
    </config-file>
</platform>

#11

@djett Thanks so much for that hook, it solved the issue for us!
I could not find an exact issue on the Codrova project that referenced that as a bug, but as far as I can tell, it is one.


#12

No prob @DonEllingsworth glad I could help


#13

Kind of shocking that the Cordova CLI still has this rather fundamental bug, even in v5.3.3! You’d think app orientation would be one of the more important things to get working…

Thanks for the config-file hook workaround, it worked around the problem very cleanly for me. Just “npm install cordova-config-utils”, add the XML to the config.xml file, and the problem was solved.


#14

I did a plugin with the code of @djett … maybe it’s useful for someone so i published it: cordova-plugin-settings-hook .
This way you just have to add the plugin:

cordova plugin add cordova-plugin-settings-hook

and write settings in your config.xml

https://www.npmjs.com/package/cordova-plugin-settings-hook


#15

I experienced a similar issue trying to get all orientations selected by default on iOS. It seems default is landscape and portrait on Android, but just portrait on iOS. This selects all for iOS:

<platform name="ios"> <preference name="Orientation" value="all" /> </platform>


#16

I am not sure if this thread is still active, but I have problem with the yoik’s orientation plugin. Just wonder if anyone is experiencing same as me and do you have any work around for that?

Since yoik’s plugin is not working for me, so I lock the whole app with in config.xml. Everything is working as expected, but splashscreen where it is display in portrait.

Could it be that I don’t have proper png for my phone? I changed all the png to landscape, but it didn’t work.