Panel, resize after orientation change

Hello,

In my app I use panels with the CollapsingArranger.
I used the settings as in the tutorial for responsive design mentioned here: https://github.com/enyojs/enyo/wiki/Panels

I have 2 panels.

What happens (using firefox responsive tool):
1. I open the app in resolution 980x1280 I see one panel small (320px) and the other using the rest of the screen.
2. I then resize the app to 320x480, as expected I only see panel one and with a swipe I see panel two.
3. I then resize back to 980x1280, I expected to see what I saw in 1. however, I see panel one with a width of 800px and panel two using the rest of the screen.

How do I fix this?
/* set the width and some basic styling for each panel */
.app-panels > * {
    width: 320px;
    background-color: #EAEAEA;
    box-shadow: -4px -4px 4px rgba(0,0,0,0.3);
}

/* on small devices, make each panel fit to the app width */
@media all and (max-width: 800px) {
    .app-panels > * {
        min-width: 100%;
        max-width: 100%;
    }
}

components: [
        {name: "panel", kind: "Panels", fit: true, classes: "app-panels", narrowFit: false, arrangerKind: "CollapsingArranger", content: ".", components: [
            {kind: "ib.maplist", name: "mapList", onMapSelected: "mapSelected"},
            {name: "ticketPanel", kind: "Panels", fit: true, classes: "app-panels", arrangerKind: "LeftRightArranger", margin: 0, content: "", components: [
                {kind: "ib.ticketmap", name: "ticketMap", onPanelChangeRequest: "changePanels"},
                {kind: "ib.ticketlist", name: "ticketList", onPanelChangeRequest: "changePanels"}
            ]}
        ]}
    ],

Comments

  • I recently setup an app that had panels.
    We didn't need the @media tag entry for setting the panel width to 100%.
    Enyo should automatically detect small screen sizes and only show one panel depending on what arranger you have set (not sure about all behaviors).

    enyo.Panels.isScreenNarrow();

    We decided to set our arranger based on narrow screen detection performed in the rendered method.
    	
    
         rendered: enyo.inherit(
    		function(sup) 
    		{
    			return function() 
    			{
    				sup.apply(this, arguments);
                            };
                   }
         ),
    
    
    
    
    if(this.isScreenNarrow === true)
    {
         this.log("Processing screen is narrow.");
         this.$.main.draggable = false; //turn off draggable to prevent interference with iPhone safari swipes
         this.$.main.setArrangerKind("CardSlideInArranger"); //change the arranger
         this.$.main.setIndex(0); //set the starting panel
    }
    
    
Sign In or Register to comment.