Hi!
I created Panels that I want the user to drag from one to the other. However, when I drag with the cursor, it goes from the first to the last immediately, not going to the next or previous one as it is suppose to do. Do you have any ideas what could be the problem? I tried multiple combination with properties to no avail. Please help!
Thanks!
0 ·
Comments
http://jsfiddle.net/01vva2L4/
Here's my code for this particular view. The images are transparent with a dark grey background.
http://jsfiddle.net/01vva2L4/2/
My only guess at this point is that you've used
fit: true
and assumed it will fill it's container's space. That property normally works with the FittableLayout's to fill remaining space but does nothing otherwise. If Panels aren't sized correctly then the gestures may not work as expected. I've added the 'enyo-fit' class to enforce the fill. 'enyo-fill' might be another option if you don't want to use absolute positioning.I tried both enyo-fit and enyo-fill, but neither worked. Here's the code for my structure that contains the kind
enyo.kind({ name: "panels", kind:"Panels", classes:"body", draggable: false, animate:false, components: [ { name:"initial", kind:"InitialView" }, { name:"wtad", kind:"WhatTheAppDoesView" }, { name:"eula", kind:"EulaView" }, { name:"landing", classes: "enyo-fill", kind:"LandingView" }, ], selectPanelByName: function(name) { this.$[name].show(); this.inherited(arguments); } });
Basically, I have Panels inside LandingView that are draggable, and LandingView itself is a Panel, but only accessible by clicking on a button for example.
Could the problem be from CSS?
Thanks really much for your help!
selectPanelByName
and callingshow()
on a panel. You should just remove that function and let the Panels handle the showing of each panel.* Dragging between panels requires the container's width to determine how much to transition when dragging by converting the amount dragged to the total width
* The container's width can't be determined correctly for CardArranger until the panel is shown because nodes with
display: none
have no dimesions.* CardArranger will call
resize()
on the transitioning panels which will update the container bounds if they're not already showing. This prevents the unnecessary call for the already active panel.In your code, the call to
show()
is short-circuiting this last step by showing the new panel early causing the bounds to be invalid and thereby breaking drag transitioning. As Chris said, you can safely remove the explicit call toshow()
as Panels will handle that for you.