ionic-framework: range is not working when using side menus

The problem is that the drag event is prevented by the side menu directives so it is not possible to slide a range widget via mousedown.

About this issue

  • Original URL
  • State: closed
  • Created 11 years ago
  • Comments: 36 (3 by maintainers)

Most upvoted comments

I found a simple workaround to prevent SideMenu to conflict with Range. Maybe it is better than making a specific exception for Range inside SideMenu code:

(function() {"use strict";

    angular
        .module('MyApp.Directives.range', [])
        .directive('range', rangeDirective);

function rangeDirective() {
    return {
        restrict: 'C',
        link: function (scope, element, attr) {
            element.bind('touchstart mousedown', function(event) {
                event.stopPropagation();
                event.stopImmediatePropagation();
            });
        }
    };
 }
})();

PS: I don’t think stopImmediatePropagation is necessary, but the idea is to stop propagation to let range input have its normal behaviour.

With this fix, there is no conflict at all, and drag-content=“false” is no longer necessary (we can drag the page to open side menu, or drag range without opening it).

i have the same problem. i am setting the drag-content directive to false and that effectively prevents the side menu from being dragged but it also prevents the range component from being dragged more than a few pixels.

it seems that the event propagation is being stopped by the SideMenu. Commenting this line works for me: https://github.com/driftyco/ionic/blob/ce06f6e40bdb2bc560d9241aa1ef23db4fff065f/js/angular/directive/sideMenuContent.js#L79

But I am unaware of the consequences, it might break something else, although in my particular case seems to work

update: bug reproduced in v1.0.0-beta.14 and v1.0.0-rc.5, and workaround only tested in v1.0.0-rc.5