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.