[solved] Two views layout & panel (reveal) - can be only opened once

Dear all,

I have an issue with a two view layout and a right panel (reveal). Based on the screen size only one view is shown (other is hidden, but in the DOM). In this situation the panel can be only opened/closed once. Everything works fine if the panel style is “cover”

I created some examples:

  1. two views & panel style reveal -> as expected -> panel can be opened and closed mutiple times
  2. one view & panel style reveal -> panel can be opened and closed only once
  3. two view & pane style cover -> as expected
  4. one view & panel style cover -> as expected

Close panel -> click on backdrop

The code / layout is mainly the same, only difference is:
a) reveal vs cover as pane style
b) right view (examples 2) and 4)) are hidden (display none) or visible (examples 1 and 3)

Two views & panel style reveal
https://4ls5e.csb.app/

One view & panel style reveal -> unexpected behaviour
https://kqd7y.csb.app/

Two views & panel style cover
https://j41ro.csb.app/

One view & panel style cover
https://61u10.csb.app/

Is this a Framework7 issue? Or mistake on my side?

I noticed that it case of example 2 it seems that when the panel is closed / should be closed the backdrop is not closed correctly;

  1. it still the class ‘panel-backdrop-in’ and
  2. the app (tag html) has the class ''with-panel-closing").
    Somehow, the closing of the panel is not finalised internally.

Best regards
Andreas

1 Like

Bro, try to use example for make split or dual view using Pro7. It has Framework7 App Start for Single, Split, Tab, and Split Tab View. Hope this help you

Many thanks for the recommendation of your framework. I will have a closer look for my next project.

But since the current app is already finished, it is more, I do not want to spend too much time to incl. an additional framework.

Any other suggestion how to solve the issue above / what’s my mistake?

Best regards
Andreas

2 Likes

Try to create a live example using templates from here How to ask a good question on forum so we can better understand what is the issue

Updated… & examples added

Ok, just wrap your views with <div class="views"> element like here https://codesandbox.io/s/sleepy-snow-m9ltu?file=/index.html and it will work

Many thanks … works (like always)

It still not working for me. I noticed it just opens once then stays closed.

Hey, I tried this no luck.

I have attached screenshot as well.

The panel-out class just causing issue. Any solution for that?

you miss the div with class=“views” wrapping the div with class="view view-main"

Same issue, I tried wrapping in views and same thing

I am using framework7 with ES6 though. Do I need to initialize in index.js?

I was trying to use enableSwipe function did not work as well. It has been month since I am trying to resolve this issue