Skip to content

Using button tag in header will show title in new line and increase height of header toolbar #4638

Closed
patrick-wolf opened this Issue Jul 3, 2012 · 1 comment

2 participants

@patrick-wolf

If a button tag is used in the header toolbar then it will increase the height of the header toolbar because the title is displayed in a new line. Using anchors shows the expected behavior. According to http://jquerymobile.com/test/docs/toolbars/docs-headers.html any valid button markup should work. (-> "Each button is typically an anchor element, but any valid button markup will work." ).

The reason why I want to use the button tag is because it's semantically more correct than an anchor and it can easily be disabled/enabled.

Test case:

http://jsbin.com/awoluv/57

@jaspermdegroot
jQuery Foundation member

@patrickwolfat

Thanks for reporting the bug.

I will add "button" to the selector that now only contains the anchor element. Maybe the docs need to be adjusted a bit as well, because this functionality is not supposed to work for form buttons.

In the meantime you can fix it by adding class "ui-btn-left" to the button element in your markup.

@jaspermdegroot jaspermdegroot added a commit that closed this issue Jul 3, 2012
@jaspermdegroot jaspermdegroot Header buttons: Added "button" to the selector. Fixes #4638 - Using b…
…utton tag in header will show title in new line [1.1.2.]
7cf44d4
@jaspermdegroot jaspermdegroot added a commit that referenced this issue Jul 12, 2012
@jaspermdegroot jaspermdegroot Header buttons: Added "button" to the selector. Fixes #4638 - Using b…
…utton tag in header will show title in new line [1.1.2.]
99d8164
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.