Demos: .ui-btn-left / .ui-btn-right in Toolbar: Footers

[jtsage]

Through much digging, it has become apparent that out-of-the-box, .ui-btn-left and .ui-btn-right are not exactally supported in footers. (At least, they don't have proper padding).

However, this is not mentioned anywhere on the toolbar demo page

Although I would expect it is out-of-scope to discuss custom CSS hacks on the demo site, a word of warning will likely save others some headaches.

Sources of information were:

• gh:6331
• gh:6872
• gh:6137 (comment)

[gabrielschulhof]

We might be able to do a demo showing the custom CSS necessary for making it work in a footer. @jaspermdegroot what do you think?

[gabrielschulhof]

Here's a demo: http://view.jquerymobile.com/7634-footer-abs-buttons/demos/toolbar/#Buttonsintoolbars

[jtsage]

Very cool, thank you for the quick response.

For what it's worth, viewing the demo on a small device - IPhone 4s in this case - very clearly demonstrates the fact that the footer does not take into account the presence of buttons.

[gabrielschulhof]

... case in point ...

[jaspermdegroot]

As I wrote in my comments at the tickets @jtsage referred to, the ui-btn-left and ui-btn-right are designed for the header only, not for the footer. If we are going to add a demo of using those classes in the footer with some custom CSS for overriding/setting the top and bottom offset, users will get the impression it's a supported feature to use those classes in the footer that way and expect the same results as with headers. The problem with text in footers illustrates that this isn't the case.

If we add a demo of absolutely positioned buttons in a footer I think it's better to only use custom CSS, and not the ui-btn-left and ui-btn-right classes. Other benefit is that things won't break if we make changes in the CSS rules for those classes.

Update: I just saw the PR (#7635) for this ticket. The text above the demo does make clear that users shouldn't expect the same result as with headers. I still think it's better to not use the classes at all.

[gabrielschulhof]

@jaspermdegroot, roger that!