[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.

EDIT. ALSO HAPPENS WITH MESSAGES

FYI
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

Ok.

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
    F7PageBottom
1 Like