Why is this CSS property set in the core Ionic CSS

1 
.modal-open.loading-active .modal, .modal-open.loading-active .modal-backdrop {
 pointer-events: none; 
}

This does not allow scrolling inside the modal :frowning:

2

Hmm, no you can scroll in a modal

“http://codepen.io/ionic/pen/gblny”

This is in there to prevent any interaction with the main content, covered by the backdrop

3

No I could not scroll inside the modal. So I set this to:

pointer-events: all
4

Hmm even in that codepen? Any chance you could show your markup or a demo of what you have?

5

I don’t know whats happening. I commented our my custom CSS and now its working fine. The other day I could not scroll inside a modal when trying out in the emulator. I will let you know if it occurs again.

Thanks. This is one awesome community.

6

Alright, let me know if it happens again.

And please, it’s you guys that make this community great!

7

Sure thing I will let you know!

Yeah! Lead by the forum and community manager :slight_smile: :wink:

1 Like
8

Yup! It happened again.

I am not able to scroll inside a modal.

Here is the markup for the contents inside modal:

<ion-modal-view>
  <div class="modal">
    <ion-header-bar class="">
    </ion-header-bar>
    <ion-content scrollbar-y="false">
      <div class="padding">
        <div class="">
             <!-- Some images --> 
        </div>
       <div class="">
        <!-- 10 items list -->
      </div>
      <div>
       <!-- some more content -->
      </div>
   </div>
</ion-content>
 
<div ng-if="">
  <div class="tabs">
   <!-- tab content -->
  </div>
</div>

</div>
</ion-modal-view>
9

Try removing the div.modal, this is probably causing the issue. ion-modal-view renders down to this so it is not needed

10

I did. It is still the same.

.modal-open.loading-active .modal

This to auto should fix it.

11

Hey @siddhartha,

We just pushed fixed some some pointer-event issues.
Can you give the nightly builds a try?

12

@mhartington

Completely breaks in nightly builds! I will stick with my solution for now. Too scared to change anything. Sorry.

.modal-open.loading-active .modal{
   pointer-events: auto !important; 
}

And also look at this: Scrolling in a modal I have not looked at the codepen on this thread yet. But I feel the issue it common.

13

Hey, I’m the guy from the post @siddhartha posted.

I didn’t touch any CSS and it ended up working for me. I just had to reimplement the codepen from Ionic.

Thanks!