How do I interact with items in the background in

Question

Ionic Version: 1.x

Platform: all

I have an ionic app which uses an ionic popover. However, when the popover is active (open), I can no longer interact with things in the background, for example scroll down my list of items. I have tried looking for existing answers for this question, but did not see the question being asked.

The popover itself does not have to be bound to any active element on the page, since it currently has position:fixed and will always appear in the same position.

So basically the question is, is there a way to prevent the popover from preventing me interacting with everything in the background?

Answer 1

I found this codepen someone put up:

https://codepen.io/ionic/pen/GpCst

This may do the trick?

.popover-backdrop {
  display:none;
}

Answer 2

I have found an answer, however, not sure if there is a better way to do this, perhaps an option that turns interacting with the background on and off, but for now the answer seems to be as follows:

1. Ensure the .popover-backdrop class is the same size and position (height and top margin in my case) as the actual fixed popover element. The default is height 100%.
2. Ensure that for the .popover-open class (applied to the body) you disable pointer-events: none;
3. Keep in mind that this will change the behaviour where if you click outside of the popover that it will close it by default. So in ionic, I will have to make sure that on the event where I leave the view that closes the popup if active.