iPad rotation issue

edited September 2012 in Newbie Questions
Greetings, I have a strange issue with my application on iPad. Have a look on the app opened in Chrome:

Image and video hosting by TinyPic

When I deploy it on iPad and I launch it in portrait mode everything is fine: when I switch to landscape from portrait and back, everything is resized as it is supposed to and works great.
BUT, when I launch the application while the iPad is in landscape mode, if I switch to portrait mode, it won't be resized correctly, the width of the content stays greater than the width of the screen. And if I switch back to landscape it works.

This is really strange and I'm stuck for days with this issue... Here's my code:

enyo.kind({
    name : "Application",
    kind : "FittableRows",
    classes: "onyx enyo-fit",
    components : [
        {kind : "onyx.Toolbar", classes : "onyx-menu-toolbar enyo-fit", components : [
            {kind: "Image", src: "Resources/search-input-search.png", style: "height: 40px;"},
            {content : "Catalogue"},
            {kind: "Image", src: "Resources/home.png", style: "height: 40px;"}
        ]},

        {kind : "CatalogPanel", name: "catalogPanel", fit: true}
    ],
    create: function(){
        this.inherited(arguments);
    }
});
The CatalogPanel.js:

enyo.kind({
    name : "CatalogPanel",
    kind: "enyo.Scroller",
    style: "background-color: #EAEAEA;",

    create: function()
    {
        this.inherited(arguments);
        //TODO remove after tests
        for(var i=0; i
And Product.js:

enyo.kind({
    name: "Product",
    tag: "div",
    kind: "FittableRows",
    style: "border-style: solid; border-width: 2px; padding: 10px; margin: 10px; display: inline-block; width: 200px; height: 250px;",

    published: {
        image: "",
        text: "",
        identifiant: -1
    },

    components: [
        { kind: "Image", name: "image", style: "display: block; margin: auto", fit: true},
        { tag: "p", name: "text", style: "text-align: center; font-size: 0.8em"}
    ],

    create: function() {
        this.inherited(arguments);

        this.imageChanged();
        this.textChanged();
    },

    imageChanged: function() {
        this.$.image.setAttribute("src", this.image);
    },

    textChanged: function() {
        this.$.text.setContent(this.text);
    }
});
I don't think you'll need CatalogPanel.js and Product.js but I really have no idea where this issue is coming from so I give you all the information I have.
Sign In or Register to comment.