Routable panel doesn't load panel-backdrop div

Questions
1

The version is 3.5.0, I use routable panel to initialize the left panel, the relevant code
main.js

    ...
    {
      path: '/left-panel/',
      panel: {
        url: './left-panel.html',
      }
    },
    ...

left-panel.html

<div class="panel panel-left panel-cover">
  <div class="content-block">
    <p><a href="#" class="panel-close">Close me</a></p>
    <p><a href="#" data-panel="right" class="panel-close">Open Right Panel</a></p>
  </div>
</div>

But the left-panel created in this way acts differently from that created by inline HTML. The '<div class="panel-backdrop"></div>' doesn’t show up after the panel is loaded. As a result the backdrop click doesn’t work.

Does anyone know how to make backdrop click work with routable panel?

2

There is an issue with this which is already fixed and will be next update. In meanwhile you can just add backdrop element manually to the app root element:

<div id="app">
    <div class="statusbar"></div>
    <!-- add backdrop -->
    <div class="panel-backdrop"></div>
3

It works, thank you very much!

4

Hi…
I have now an issue the other way around. I have a routable panel within an extra view to keep it kind of permanent on top of my regular tab views. It basically works, but when I want to close it, it does not remove the backdrop on mobile. In tablet view (outside the breakpoint) it works fine as there is no backdrop and actually no closing behavior.

However, as a workaround I can remove it programmatically:

	app.panel.left.$backdropEl.remove();
1 Like
5

@VIEWSION do you have a JSFiddle where i can see the issue?

6

No JSFiddle set up yet. But it turned out this is is only an issue with “panel-reveal”. With “panel-cover” everything works fine. It is not too urgent anymore as the cover option is also fine for me. But when I have some time, I will set up an example.

Thx for always responding that quick! You are da best :wink: