Panel, resize after orientation change


In my app I use panels with the CollapsingArranger.
I used the settings as in the tutorial for responsive design mentioned here:

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"}


  • 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).


    We decided to set our arranger based on narrow screen detection performed in the rendered method.
         rendered: enyo.inherit(
    			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.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!