jquery/jquery-mobile — Issue #3491: Form element: Toolbar styling and general cleanup 
Author: toddparker
Created: 2012-01-25 22:20:45+00:00
State: open

Currently, our form elements have styles are scoped too tightly to the content area so they fall apart when placed inside a toolbar. Part of the issue is that we have some overreaching rules for headers that were originally intended to just style the buttons to the right and left of the header but are greedy enough to affect other button-esque widgets like selects.

This demo illustrates the current state:
http://jsbin.com/abadek/3
http://jsbin.com/abadek/3/edit

I'd like to suggest a few things:

* Clean up our styles so buttons and forms work consistently regardless of what container they sit in. A lot of this is just tightening up the scope of our styles to be more generic

* Abstract the smaller button style seen in headers as a new "mini" style that can be added to any form element to reduce it's vertical height. This mini style is useful inside toolbars but also if you just need a smaller element in the page. Surface this as an option and data-mini="true" attribute

* Make the "inline" attribute that is available in buttons across all form elements too. By default, a form element is block (100% width) but with inline applied, it's width will be what's needed to fit the contents.

* Ensure that both the normal and mini sized form elements have consistent vertical heights for use next to each other, common in toolbars

* Ensure that the left and right button position classes can also be used to hold form elements so it's easy to add a search box or dropdown to a header bar in place of a button.