Vue - Toolbar Bottom does not show

Questions
1

I’ve just started using F7 with Vue but have run into issues when rendering a toolbar using the bottom position: it simply does not show. Page component template:

<f7-page name="simple-pos" class="pos">
    <f7-toolbar>
        <f7-link @click="sheetOpened = true">Left Link</f7-link>
        <f7-link @click="sheetOpened = true">Right Link</f7-link>
    </f7-toolbar>
</f7-page>

Result is https://i.imgur.com/T1yHezm.png

2921×696 112 KB

2

The repo is https://github.com/kukks/btcpayserver-ui by the way and the file in question is https://github.com/Kukks/btcpayserver-ui/blob/master/src/pages/SimplePOS.vue

3

Maybe you are missing the bottom prop?

      <f7-toolbar bottom-md>
          <f7-link>Left Link</f7-link>
          <f7-link>Right Link</f7-link>
        </f7-toolbar>

bottom
boolean
Bottom positioned toolbar. Shortening for position=“bottom”

4

As soon as I add the bottom attribute, the toolbar is no longer visible in the view.

5

Code is correct and it is apparently there, you are missing some bits, maybe some custom CSS hides it or something like that

6

Nope, no custom CSS at all

7

Would be good to see a live example then

8

I could not recreate the issue outside of my app. Fixed it with some shitty css (scss) for now

//fix bottom toolbar not appearing..
.toolbar-bottom {
  bottom: 56px;
}

@supports (-moz-appearance:none) {
  .page {
    padding-bottom: 98px
  }
}

@supports (not (-moz-appearance:none)) {
  .toolbar-bottom ~ .page-content {
    padding-bottom: 98px
  }
}

@media (min-width: 768px) and (min-height: 600px) {
  :root {
    .toolbar-bottom {
      bottom: 64px;
    }
  }
}