Well my question seems a bit not clear, i have built a basic app with left and right side menus then i tryed to use this slider http://www.idangero.us/sliders/swiper/
but when i try to slide over the container the entire ion view slides with it to show the side menus, is there any way to disable the slide top open side menus on some divs so that i can slide across the items in that div without showing sliding the entire menu ?
and sorry for my english, it’s neither my first or second language
i would love to but how can i style it because it takes full screen by default and i only want it on a specific height with some other styles applied to it ? i couldn’t find on the docs or demos a way to do that
Thank you so much for the replies i like ion slidebox it’s smoother in every way so i’ll go with @mhartington 's option, and by the way i really love the framework great job guys
I’ve been using ion-slide-box since beta1 and since then it cannot prevent the swipe gesture to also open the side menu. Is there anything else I have to do to enable that, @mhartington ?
As I understand it <ion-slide-box> adds the .slider class. So the problem with your fix is that the bottom: 50% breaks the slider into half: (the dots are supposed to be on the bottom)
Actually, I found the issue in my case to be something else after I went back to test what I was doing because there was no fundamental difference between what I already had implemented and what you suggested, @mhartington .
The slider works as expected on my Moto G (4.4.2) and on a Galaxy Nexus (4.3), and the failing environment is Ripple.
I don’t know why it fails on Ripple, but I confirmed that it works as expected on pure browser (codepen) and on pure cordova (running the application), and only fails when emulated through Ripple (it works when emulated directly through Chrome Device Emulation). I’ve tested this case on Ripple using Chrome@Linux, Chrome@MacOS, Safari@MacOS and Firefox@Linux, and Firefox was the only one that worked as expected.
can you give me an example ? how can I disable the drag JUST on the content section ??
I Know I must add attribute {{drag-content=“false”}} to the ion-side-menu-content
it doesn’t work when I add it to the ion-view
Many thanks again Mr. @Calendee
I’m Very sorry for this inconvenience
when I applied your way, I was able to disable drag content on all page within ion-nav-bar
and then I tried to give ion-nav-bar a specific controller and apply
$scope.$root.canDrag = true;
on it, but it doesn’t work.
still can’t drag content from ion-nav-bar only…
What is the reason ?? Can I apply drag content on ion-nav-bar and disable it on the rest of my page ??
I think you’ll need to setup a CodePen sample. It’s pretty hard to troubleshoot it without something to work with. Fork my sample, modify it with your changes, and let me know.
I need to disable Drag Content in all Page1 and all Page2 {{ EXCEPT on “Nav Bar” or ion-nav-bar within each page}} and swipe between them
In other words: if the user try to drag side menu when he is on the Nav Bar, he can do this,
but if he try to drag side menu when he is on the rest of the page, he can’t
Ah… I see what you mean. Out of the box, I don’t think Ionic supports ability to allow drag to open depending on what you’re dragging.
I’ve put together a sample that can make this work. It’s not perfect and could use some fine tuning.
On page 2 where side menu content is disabled, you can swipe on the Navbar to get the sidemenu to open. The directive for this is navBarSwipe. navBarSwipe uses the swipe gesture because it’s pretty smooth. I’ve commented out the drag gesture. You could change the directive to use the drag. However, it’s a bit glitchy. You’d need to spend some time fine tuning it - maybe with a debounce or distance detection.