Config .xml Preference Orientation not working for IOS

sdonyh · June 25, 2014, 1:22am

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.

mhartington · June 25, 2014, 11:50pm

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?

sdonyh · June 26, 2014, 5:06am

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

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

mhartington · June 26, 2014, 2:06pm

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

sdonyh · July 3, 2014, 10:42am

Thanks for the reply.

Will this be fixed in later versions of Ionic?

mhartington · July 3, 2014, 1:41pm

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

guilleferrer · October 9, 2014, 12:41pm

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

DonEllingsworth · March 25, 2015, 9:30pm

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.

djett · March 25, 2015, 9:44pm

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

djett · March 25, 2015, 9:56pm

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>

github.com

diegonetto/generator-ionic/blob/master/templates/hooks/after_prepare/update_platform_config.js

#!/usr/bin/env node

/** This hook updates platform configuration files based on preferences and config-file data defined in config.xml.
    Currently only the AndroidManifest.xml and IOS *-Info.plist file are supported.

    Preferences:
    1.  Preferences defined outside of the platform element will apply to all platforms
    2.  Preferences defined inside a platform element will apply only to the specified platform
    3.  Platform preferences take precedence over common preferences
    4.  The preferenceMappingData object contains all of the possible custom preferences to date including the
        target file they belong to, parent element, and destination element or attribute

    Config Files
    1.  config-file elements MUST be defined inside a platform element, otherwise they will be ignored.
    2.  config-file target attributes specify the target file to update. (AndroidManifest.xml or *-Info.plist)
    3.  config-file parent attributes specify the parent element (AndroidManifest.xml) or parent key (*-Info.plist)
        that the child data will replace or be appended to.
    4.  config-file elements are uniquely indexed by target AND parent for each platform.
    5.  If there are multiple config-file's defined with the same target AND parent, the last config-file will be used
    6.  Elements defined WITHIN a config-file will replace or be appended to the same elements relative to the parent element

This file has been truncated. show original

DonEllingsworth · April 27, 2015, 3:50pm

@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.

djett · April 27, 2015, 10:09pm

No prob @DonEllingsworth glad I could help

matthewlloyd · November 2, 2015, 1:12am

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.

mircocip · December 9, 2015, 3:11pm

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

brokenponyclub · February 22, 2016, 9:43am

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>

KimB · March 17, 2016, 8:42pm

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.