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

JamesNK opened this Issue Dec 16, 2010 · 5 comments


None yet

4 participants

JamesNK commented Dec 16, 2010

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:

pwashuta commented Aug 4, 2011

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 Feb 15, 2012

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