[SOLVED] Panel dropback for iOS

Questions
1

Hi,

Is it possible to have panel dropback in iOS? Also, in desktop firefox browser clicking outside the panel closes it (though there is no visible dropback), but on real iOS device the effect is not seen.

Is there any plan to add something like app.panel.dropback for this purpose?

Thanks in advance!

2

It is there, but just has transparent background. You can just set its background color, somthing like add this to CSS:

.ios .panel-backdrop {
  background: rgba(0,0,0,0.3);
}
html.with-panel-left-reveal .panel-backdrop, html.with-panel-right-reveal .panel-backdrop {
    opacity: 1;
}
3

Thanks, @nolimits4web for your help! The dropback is fine now.

But, how to enable closeByBackdropClick? My client insists on having that!

Thanks again!

4

$$('.panel-backdrop').addClass('panel-close') doesn’t work, why? :thinking:

5

What do you mean? This parameter is enabled by default http://framework7.io/docs/panel.html#panel-app-parameters and panel closes by backdrop clcik

6

Clicking panel backdrop in Android closes the panel, but not on iPhone. I checked iPhone X and 7. What should I check? It is a phonegap app.

7

You can check the kitchen sink, it works in iOS too. Check your code and side and make sure backdrop is there

8

I use panel-cover panel-right classes; I hope this is not a problem. I already checked KS, I see nothing special there. Here is the simplified code of my panel:

<div id="app">
    <div class="statusbar"></div>
    <div class="panel panel-right panel-cover ms-panel">
    ...
    </div>
</div>

ms-panel is a customization class. It there any problem?

9

Try to add <div class="panel-backdrop"></div> right before panel element

10

No difference. I see there is already one there:

image
image.png944×1800 243 KB

As you can see, I am testing it on Chrome desktop, and the problem is the same. I even tried $$('.panel-backdrop').click(() => alert('clicked!')) but the event is not triggered. Maybe this helps.

11

Update 1:

I finally found the problem (but no workaround). The problem is that I have several swipers in the app, with slides containing links. To avoid them being clicked while swiping, I had to set app.touch.fastClicksExclude = '*'. Removing this, the panel backdrop works as expected.

Update 2:

Setting app.touch.fastClicksExclude = '.swiper-slide' solves the problem!