Seems to be a bug with hiding toolbar

Questions
1

If I use the framework cli and create an app with PWA, svelte, and tabbed views, I cannot seem to hide the main toolbar in the test app generated.

When I add “noToolbar” to home page, it doesnt get hidden per documentation.

2

did you try:

        $$('.navbar').hide();
        $$('.toolbar-bottom').hide();
3

This doesn’t work with svelte version. I can look into hiding the toolbar with script, but it should work by adding the property to the page. I’m able to duplicate the issue in the standard f7 starter app.

4

Id like to keep the shared bottom toolbar active and hide on certain pages…So far, I cannot find a solution with Svelte. f7.$(’.toolbar-bottom’).hide() does work but it hides the toolbar all the time. I cannot seem to get it to hide only when a certain page is loaded.

5

I figured it out…The page I want to hide the toolbar was actually set to one of the tab bar start pages. If I want to have this page full screen without the global tabbar, I need to make it a different page than requested in main view tab bar. Ugh… So if I have view like so:

`<View id="view-video" name="video" tab url="/video/" />`

I cannot hide the tabbar in /video page. …Ive worked around this by linking /video page to another page that hides the toolbar.

1 Like
6

Hey @mdorson1 I had a similar task to hide global Tabbar on specific page. Here is my solution.
The key idea do not touch Svelte to rerender App component (where tabbar is defined), instead triggering F7 to refresh dom element. I’ve used routerChange(d) event.
Link: https://gist.github.com/vladdancer/d9fe6e4103dde8276bd9af8d0c5f0ff9

7

Another idea is move Toolbar from View and wrap into svelte component and controll appearance from there.
Example: https://gist.github.com/vladdancer/d9fe6e4103dde8276bd9af8d0c5f0ff9#file-appsolution2-svelte