Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Input-based buttons in header with ui-btn-right display incorrectly #691

JamesNK opened this Issue · 5 comments

4 participants


I have the follow HTML:

<div data-role="header" data-position="inline" data-nobackbtn="true">
    <h1>Page Title</h1>
    <input type="button" data-icon="gear" class="ui-btn-right" value="Options" />

In Firefox the button is left of the title instead of right. In Chrome the display of entire header is messed up with the button stretching oddly across the screen.

If I change the button to an anchor it works.


Can you check this on the latest:


This issue still exists in beta2.

It seems that during the conversion of the form button into a custom styled link-based button the class "ui-btn-right" does not get applied to the dynamically created div that contains the new span and the now hidden ("ui-btn-hidden") input.

Adding "ui-btn-right" to the input's parent div seems to place the button in the correct position.


This bug still exists in RC1 but for now @pwashuta's suggestion to add 'ui-btn-right' works.

At the very least, the docs are misleading by indicating that any valid button markup may be used. See the "Adding Buttons" section:


This is now fixed in our button re-write for 1.1. You can use any form element in toolbars and they get the new "mini" style. Just add the ui-btn-left/right to position them.

@toddparker toddparker closed this

Nice. However it looks like the input buttons are ui-fullsize and do not default to mini as with anchor tags.

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.