Framework7 toolbar is not fixed to bottom and not showing the content

i tried to add the toolbar in the page and in the view and even in the page content. nothing worked.

i tried to copy and paste the code from the Framework7 documentation and still no luck

the toolbar is not fixed to the bottom or display the content of the bar in the desgin view

Toolbar is not fixed to bottom on mobile
Can someone confirm?

Where Wappler generates the code:

<div class="toolbar">
     <div class="toolbar-inner">
          <a href="#" class="link">Hello</a>
          <a href="#" class="link">World</a>
     </div>
</div>

I was able to get it to show on bottom by changing the class:

<div class="toolbar toolbar-bottom-md">
     <div class="toolbar-inner">
          <a href="#" class="link">Hello</a>
          <a href="#" class="link">World</a>
     </div>
</div>

Does that work for you?

Actually its working fine on mobile (ios) browser
the issue was with desktop browsers

uuh maybe it wasn’t veyr clear but the Framework7 is really only for mobile apps, not really suitable for desktop browsers. You should use there the regular Bootstrap 4 framework.

Framework7 is really optimized for mobile apps and their mobile browsers.

See http://framework7.io/

Yeah its for apps but you still can use it for browser :sweat_smile:
And PWA is the future too

true, but if you find problems with Framework7 itself maybe it is a better idea to post to their forums:

The maker Vladimir there is pretty quick with fixes - he delivers new weekly updates as well.

i have tested this on android app and it overlap the navbar on top. (mobile project)

As you can read here:

http://framework7.io/docs/toolbar-tabbar.html#toolbar-type

there are 3 types of toolbars - depending of how you want to position them.

Static Toolbar

Static toolbar position is the probably most rarely used layout type. In this case Toolbar / Tabbar is just part of the scrollable page content

Fixed Toolbar

Fixed toolbar is also part of the page but it is always visible on screen not depending on page scroll. In this case it must be a direct child of page and if page has also fixed Navbar then it must be AFTER Navbar

Fixed Toolbar/Tabbar must always be a direct child of a page and AFTER the Navbar (if fixed navbar is used on this page)

Common Toolbar

If we need only one common toolbar for all pages in View then it must be a direct child of this view and be BEFORE all pages in view

Make sure you position it well

So the position is really important. I think you are going for fixed so it must be placed in the Page element.

Is that your case?

@George Of course i read it :slight_smile:
it would be much easier to try to replicate the the desired result instead of trying to prove its not an issue

This is my app structure, do i have it wrong?

You are right as the Framework7 docs state:

In MD Theme Toolbar/Tabbar is usually on top of the app right below the Navbar. But if you really need to have Toolbar on bottom you can do it by just using addional toolbar-bottom-md class

So you need indeed this class for Android otherwise on Android the toolbar is displayed on top below the navbar.

We will add it to the properties for easier setting.

Also we will be adding more ready to go page templates, so you can start more quickly than adding all the blank elements one by one.

1 Like