I have the follow HTML:
<div data-role="header" data-position="inline" data-nobackbtn="true">
<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.
Nice. However it looks like the input buttons are ui-fullsize and do not default to mini as with anchor tags.