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.

Sign up for GitHub

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

Jump to bottom

Range Slider doesn't work inside modal view #6885

Closed
ninoguba opened this issue Jun 13, 2016 · 8 comments
Closed

Range Slider doesn't work inside modal view #6885

ninoguba opened this issue Jun 13, 2016 · 8 comments

Comments

@ninoguba
Copy link

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
@jgw96 jgw96 added the v2 label Jun 13, 2016
@jgw96
Copy link
Contributor

jgw96 commented Jun 13, 2016

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 jgw96 added v1 needs: reply the issue needs a response from the user and removed v2 labels Jun 13, 2016
@ninoguba
Copy link
Author

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>

@ninoguba ninoguba mentioned this issue Jun 14, 2016
Closed
@Ionitron Ionitron removed the needs: reply the issue needs a response from the user label Jun 15, 2016
@basdp
Copy link

basdp commented Jun 29, 2016

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();
}

@ninoguba
Copy link
Author

Thanks @basdp I'll give this a try.

@danmatthews
Copy link

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

@ninoguba
Copy link
Author

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

@jgw96 jgw96 mentioned this issue Jan 13, 2017
Open
@jgw96
Copy link
Contributor

jgw96 commented Jan 13, 2017

This issue was moved to ionic-team/ionic-v1#121

@jgw96 jgw96 closed this as completed Jan 13, 2017
daweedm added a commit to daweedm/ionic-v1 that referenced this issue Feb 19, 2018
@daweedm
bug fix: modal behavior
fb4ac63 
See ionic-team/ionic-framework#6885
@ionitron-bot
Copy link

ionitron-bot bot commented Sep 4, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 4, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@basdp @danmatthews @ninoguba @Ionitron @jgw96