I have the same requirement in an app I have written. On one page, in addition to a regular (static) footer, I have another DIV defined with role=footer and data-position=fixed containing a toolbar with buttons.
This works fine when the toolbar is showing. But I want the toolbar absent when the page is first shown - so I added data-visible-on-page-show=false. Also, I want the toolbar to be visible only when the user has selected certain elements within a list. So, I added the use of fixedtoolbar('show') and fixedtoolbar('hide').
The issue is that data-visible-on-page-show=false or fixedtoolbar('hide') simply demotes the fixed toolbar to a static toolbar (as the documentation states.) Depending on the size of the page or where you have scrolled, the toolbar may still be visible -- which is not the desired effect.
This can be remedied by adding the option data-fullscreen=true to the role=footer DIV. Then using 'hide' and 'show' will really make the toolbar disappear and appear. You will also want to specify data-tap-toggle=false to prevent random screen taps from making the toolbar come and go.
The option data-fullscreen=true has one very big drawback. When you employ it on a toolbar on any page, jqm gives the page an additional class of ui-page-footer-fullscreen, which has the side-effect of messing with the layout of the page. Your page contents in this case will look very cramped whether the toolbar is showing or not. This is alluded to in doc where it states: "Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions". But it should be strongly stated as a restriction.
The layout issue is caused by the fact that CSS defines ui-page-footer-fullscreen to specify padding:0 which when inherited will defeat much of the spacing used by elements on the page.
A work-around is to add your own class to the page-defining DIV. Use this class in a new CSS rule
that overrides the padding:0 specification and restores the default padding (padding:15px). I am sure there are other workarounds possible, once you realizes that it is ui-page-footer-fullscreen (or ui-page-header-fullscreen) causing the problem.
I found this workaround satisfactory for my app. It is required in both jqm 1.2.0 and 1.3.0.rc1.
Leave a comment on steve2001's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic