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

Closed
JamesNK opened this Issue Dec 16, 2010 · 5 comments

Projects

None yet

4 participants

@JamesNK
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" />
</div>

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.

Contributor

Can you check this on the latest:
http://jquerymobile.com/test

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.

http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/buttons/buttons-types.html

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:

http://jquerymobile.com/demos/1.0rc1/docs/toolbars/docs-headers.html

Contributor

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.

http://jsbin.com/ulodus/2
http://jsbin.com/ulodus/2/edit

@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.

http://jsbin.com/azujig/2
http://jsbin.com/azujig/2/edit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment