Modal Sheet backdrop issue in popup

1

Hi,

I have a Modal Sheet inside a Popup page.
I have set backdrop to true for the Sheet.
The problem is that the Sheet backdrop is actually behind the popup so when in mobile view it doesnt seem to be showing.
Is there away to make the Sheet backdrop on top of the Popup.

Im using Svelte, not sure if the other frameworks have the same issue.

image
image878×822 33.1 KB

image
image881×833 35.2 KB

2

Which version of f7 you are used? I am using latest version(5.5.3) of f7

I am using same things on my project, and working perfectly.
I think you have added Sheet on outside of the popup.
To working properly of overlay of sheet declare it inside popup and try again.

1 Like
3

Hi,

Thank you for your response.
I am on the latest version.
image

I am using a routable popup, Im not sure if that makes a difference.

Here is my popup route page from the screenshots

<Popup onPopupOpen={popupOpen}>
<View>
    <Page name="testpopup">
    <!-- Top Navbar -->
  <Navbar sliding={false} large>
    <NavLeft>
      <Link iconIos="f7:menu" iconAurora="f7:menu" iconMd="material:menu" back />
    </NavLeft>
    <NavTitle sliding>Test Page</NavTitle>
    <NavTitleLarge>Test Page</NavTitleLarge>
  </Navbar>
  <!-- Toolbar -->
  <Toolbar bottom>
    <Link>Left Link</Link>
    <Link>Right Link</Link>
  </Toolbar>
  <!-- Page content -->

    <p>1 Here is your blank Framework7 app. Let's see what we have here.</p>
    <p>
  <Button fill sheetOpen=".demo-sheet-push">Sheet Push</Button>
</p>

    <Sheet class="demo-sheet-push" push backdrop>
      <Toolbar>
        <div class="left"></div>
        <div class="right">
          <Link sheetClose>Close</Link>
        </div>
      </Toolbar>
      <PageContent>
        <Block>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in tempora harum sequi corporis alias ex adipisci.</p>
          <p>Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut deserunt soluta alias magnam. Consequatur, nisi, enim.</p>
          <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
          <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?</p>
          <p>Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus sapiente repellendus nesciunt praesentium velit ipsa illo iusto.</p>
        </Block>
      </PageContent>
    </Sheet>

    </Page>
</View></Popup>

Thank you

4 
.sheet-backdrop {
  z-index: 11001;
}

Add this css on your app.css

2 Likes
5

This worked. Thank you.