framework7

Open full view…

App with Tabbar and using Messages

seme1
Fri, 27 Jun 2014 20:08:58 GMT

Tabbar is used in the main pages of my app and its structure follows that provided in the docs for tabbar. The problem is when viewing a page that is meant for Messaging, the tabbar should disappear. For hiding/showing the tabbar, I use the following: --- $$("#views").addClass("hidden-toolbar"); $$("#views").removeClass("hidden-toolbar"); --- However, the tab bar seems to be cover the toolbar for writing/sending messages as it never showed up !! I even attempted to copy and paste the code provided in the docs in a separate page, and loaded that page in my app after moving from a page that has the tabbar visible, but still the bottom toolbar and its input form is never shown !!

seme1
Fri, 27 Jun 2014 20:13:27 GMT

The structure of my app is as follow: --- .views .view1 .pages .page toolbar-fixed .page content .toolbar <-- this one has the text input form .tabbar --- Note that the toolbar is as same level as that of page content. What I need is to display the toolbar and hide the tabbar

seme1
Sat, 28 Jun 2014 08:08:59 GMT

I am also facing a similar problem with the nav bar as it disappeared from the Messages page. Any one can imitate these problem with the tabbar and navbar by simply downloading the main tabbar example found at the F7 website and then placing a link in any of the tabs to "messages.html". The messages file is the same one used in the kitchen sink (simply copy and paste it in the index.html folder).

Vladimir Kharlampidi
Sat, 28 Jun 2014 10:50:52 GMT

Hi, did you look at kitchen sink styles? You need to overwrite styles for messages page's navbar and toolbar in "hidden" mode to keep them visible, for example: --- .hidden-toolbar .page[data-page="messages"] .toolbar { -webkit-transform: none; -moz-transform: none; transform: none; }

seme1
Sat, 28 Jun 2014 11:16:42 GMT

Honestly, no I didn't ! Since the "messages" part is a component of the F7 framework, I expected its styles to be in the framework7.css file. The tabbar problem is now fixed when adding the the .hidden-toolbar style you suggested. Thanks

seme1
Sat, 28 Jun 2014 11:17:25 GMT

The navbar is not displayed now, but I'll try to figure this out myself.