[SOLVED] Message Bar not visible with Tabs

I have 3 views. Tabs on bottom.
In one view, I am using “Messages”
The “toolbar messagebar” is in the page div.
The textarea is hidden behind the Tabs.
I can see it hidden in the Inspector.

How do I make the textarea / messagebar appear above the tab bar so it is not hidden?

Question 2;
When I put “toolbar messagebar” in the “page-content messages-content”, the messagebar appears on top. Is this okay?
It is okay for me for a while.


Yes, you can put HTML in the ‘text’ property and it will display as HTML. This is how I got buttons in the messages.
Yes. Some content is coming from IBM Watson.
All messages created like so:
myObject.Messages.addMessage( response, ‘append’, true);

My Question?
How do I get all “Messages” elements content to appear when there is a view/tab?
Only one of the buttons shows. There are a couple more. And the last one should have the ‘guy’ image.

When I Inspect in Firefox, everything is there, just hidden by the tabs.

Just don’t do this! This is already a very bad UX of having one toolbar on top of another. Open chat page as a popup or another page and hide tabbar in this case


I did three things and it works well.

  1. Removed the toolbar messagebar and textarea
  2. Used instead a FAB that opens a app.dialog.prompt. User types message here. Most of the conversation is driven by IBM Watson and user choices, not by typing.
  3. Add a paragraph at the bottom between Messages Div and Page Div like so
1 Like

This is not a current post, but if more people read this, i will show a solution that works best for me on web and android:

  1. I used the svelte-tab-template within the CLI project creator
  2. If you have subpage with a path like /home/subpage/, then in /js/routes.js set the following option for this route:

options: { pushState: true }

  1. In your app startingpoint, where the toolbar/tabs is, create a showTabBar=true variable and in f7ready-function do this:

           /* f7.views.yourSpecificView */
           f7.views.main.router.on("routeChange", () => {
             if (f7.views.main.router.currentRoute.path === "/home/subpage/") {
               showTabBar = false;
             } else {
               showTabBar = true;
  2. Render the Toolbar only when showTabBar is true.

I used svelte-template, so for svelte it looks like:

{#if showTabBar}
      Toolbarcode goes here

PS: app.toolbar.hide('.toolbar'); in pageAfterIn also worked for me, but it feels a little bit laggy, because hiding happens later. ( see V2 pageInit toolbar hide )

Ok, i saw it’s better to switch an inline-style to hide the toolbar, than conditionaly render or not render the toolbar, because the tabs will loose the right active state. And it seems pushState option is not necessary.

Something like this:

 <Toolbar tabbar bottom style={showTabBar ? '' : 'transform: translateY(100%)'}>