Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Range Slider doesn't work inside modal view #121

Open
jgw96 opened this issue Jan 13, 2017 · 11 comments

Comments

@jgw96
Copy link
Contributor

commented Jan 13, 2017

From @ninoguba on June 13, 2016 17:33

Short description of the problem:

Range Slider is not draggable when inside a modal view running on the phone.

What behavior are you expecting?

Range Slider should be draggable to select desired value.

Steps to reproduce:

  1. Add a range slider component inside a modal view
  2. Launch modal view in your controller
<ion-modal-view>
    <div class="item range">
        <i class="icon ion-volume-low"></i>
        <input type="range" name="volume">
        <i class="icon ion-volume-high"></i>
    </div>
</ion-modal-view>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

When ran on Chrome browser, the range slider is at least tappable allowing to change the value but dragging the slider is still not working. The following message is appearing in my console the moment I tap or try to drag the slider:

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

Which Ionic Version? 1.2.x up to 1.3.x

Copied from original issue: ionic-team/ionic#6885

@jgw96

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2017

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

@jgw96

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2017

From @ninoguba on June 14, 2016 1:49

I don't have a plunker but you can view this with Ionic View using this ID: fcf03f24

All I did here was just start with the blank starter project and modified the following files:

index.html (replace body with this)

<body ng-app="starter" ng-controller="RangeCtrl">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>

        <div class="item item-text-wrap">
          <p>This range slider works as expected.</p>

          <div class="range">
            <i class="icon ion-volume-low"></i>
            <input type="range" name="volume">
            <i class="icon ion-volume-high"></i>
          </div>
        </div>

        <div class="item item-text-wrap">
          <p>Launch a modal with the same range slider.</p>

          <button class="button button-block button-outline button-positive" ng-click="openModal()">
            Open Modal View
          </button>
        </div>

      </ion-content>
    </ion-pane>
  </body>

app.js (add this code)

.controller('RangeCtrl', function($scope, $ionicModal) {
  $scope.data = {};

  $scope.openModal = function() {
    $ionicModal.fromTemplateUrl('modal-range.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();
    });
  };

  $scope.closeModal = function() {
    $scope.modal.remove();
  };

  // Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });

  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });

  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
})

modal-range.html (create this file)

<ion-modal-view>

    <div class="item item-text-wrap" style="height:100%">
        <p>This range slider doesnt work as expected.</p>

        <div class="range">
            <i class="icon ion-volume-low"></i>
            <input type="range" name="volume">
            <i class="icon ion-volume-high"></i>
        </div>

        <button class="button button-block button-outline button-positive" ng-click="closeModal()">
            Close Modal View
        </button>
    </div>

</ion-modal-view>
@jgw96

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2017

From @basdp on June 29, 2016 14:20

This is the malefactor:
https://github.com/driftyco/ionic/blob/1.x/js/angular/service/modal.js#L194

I fixed it temporarily by changing the code to:

var isInScroll = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'scroll');
if (isInScroll !== null && !isInScroll) {
    e.preventDefault();
}
@jgw96

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2017

From @ninoguba on June 29, 2016 16:13

Thanks @basdp I'll give this a try.

@jgw96

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2017

From @danmatthews on September 23, 2016 14:25

+1 for this - the only way to get it working for me seems to be to downgrade to 1.2.0 😢

@jgw96

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2017

From @ninoguba on September 23, 2016 15:16

As a workaround you can use @basdp's code above. I verified it resolves the issue with sliders on modals.

@shanesmith

This comment has been minimized.

Copy link

commented Mar 2, 2017

Another fix that doesn't involve changing Ionic's code is to simply add the scroll class to the range... no adverse effects so far.

<div class="range">
  <input type="range" class="scroll" />
</div>
@RWOverdijk

This comment has been minimized.

Copy link

commented Mar 23, 2017

This issue made me get coffee twice more often than I usually do. Why does class="scroll" work?

@shanesmith

This comment has been minimized.

Copy link

commented Mar 24, 2017

Hehe, I suppose I should have included some explanation.

The offending code can be found here: https://github.com/driftyco/ionic-v1/blob/master/js/angular/service/modal.js#L190

As you can see, touchmove events inside modals are cancelled unless the target or a parent element has the class scroll... so I just manually added the class to trick it. =)

Like I alluded to, I won't pretend to understand all the possible side effects this might have... but so far it's been fine for my use!

@RWOverdijk

This comment has been minimized.

Copy link

commented Mar 24, 2017

@shanesmith I agree. This works for me!

@roysaad

This comment has been minimized.

Copy link

commented Jun 5, 2017

Wasted a few hours trying to find a solution for this. Thanks @shanesmith for the quick fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.