Home

JQM Buttons and Form

Test new buttons and form styling

Test page, loads CSS and JS of June 7 2012 including changes:

New | Buttons and Form

Same page, loads original CSS and JS of June 7 2012, for comparison:

Currently | Buttons and Form

Changelog

Buttons

#C1

css Removed left and right margin from all buttons and set it back for: inline-buttons, buttons in grid blocks, auto generated buttons (ui-btn-left, ui-btn-right, ui-input-clear). To create consistency between buttons in and outside forms. [button.css]

docs Added style note about wrapping a button in div with a ui-grid class, but without a ui-block class to give a single (full width) button the same margin left and right as buttons in a grid. [content-grids.html]

#C2

css Set font-size 16px for all (fullsize) buttons for consistency. For some buttons the font-size was set to 16px (checkbox/radio, buttons in ui-bar, etc.), but for others not (regular buttons, selectmenu). Consistent with mini buttons where the font-size is set for all buttons. [button.css]

#C3

css Added vertical-align middle for inline buttons to create consistency between browsers, since the default vertical alignment differs. [button.css]

Fixes #3284

#C4

css Changed display inline-block rule to only be applied to buttons that are direct children of the header/footer. [button.css]

Quick fix for flip toggle, slider and vertical controlgroup in header/footer which were broken.

Fixes #3983

#C5

css Added selectors to apply the adjusted padding (at the side where the icon is) to mini inline/controlgroup buttons. Changed rule so the 3px padding left/right used for header/footer buttons with icon top or bottom doesn't apply to mini inline/controlgroup buttons. [button.css]

Forms

#C6

js Added function to have the button widget add class ui-submit to buttons/inputs type submit/reset and the corresponding label. [button.js]

css Added rules for the ui-submit class to display submit/reset buttons in ui-field-contain inline. [button.css]

#C7

css Set width to 78% for form elements wrapped in ui-field-contain to create full width forms (@media min-width 450px). [button.css][controlgroup.css][select.css][textinput.css]

css Set width to 100% for controlgroups with hidden legend and selectmenu with hidden label (@media min-width 450px). [controlgroup.css][select.css]

css Added box-sizing border-box for input type text and textarea, also for ui-input-search and submit buttons (because of 1px border). To create full width forms. [textinput.css][button.css]

js Added function to remove whitespaces (space, tab, linebreak) between label and form element to add up to 100% width without browser default inline-block spacing causing the form to wrap. [fieldContain.js]

Known issue: Not all browsers support this (i.e. IE7/WP7), but no wrapping will occur since the padding of .4em left and right (on top of the 100% width) is less then the padding right on ui-content.

Fixes #3301

#C8

css Enabled use of ui-hide-label on field-contain with checkbox/radio and other controlgroups: now legend is hidden instead of label (i.e. the button itself). Added selector to hide the label for flip toggle. [core.css]

Known issue: ui-hidden-accessible is still not working when used on legend element. See #3587.

#C9

css Adjusted margin top/bottom of controlgroups and form elements so it is consistent for all buttons and form elements. When used on top of each other "collapsing margin" will apply. Removed margin when element is wrapped in ui-field-contain since this container already has padding. [controlgroup.css][checkboxradio.css][textinput.css]

#C10

css Removed percentage margin left/right and width for ui-input-text in header/footer. In the docs (Toolbars > Footer) is explained that a div with class ui-bar can be used to have padding (to do: give this more attention in the docs). [textinput.css]

#C11

css Corrected the rule that adjusts border-width for ui-field-contain (ui-br separator). The rule was written based on the separator being the top border, but it is the bottom border. [fieldcontain.css]

Controlgroup

#C12

css Float left instead of display inline-block for all buttons in horizontal controlgroup (used to be only checkbox/radio buttons). [controlgroup.css]

js Always wrap the buttons in div ui-controlgroup-controls (used to be done only when there is a legend) so we can use this div for "clearfix" and prevent issues with float. [controlgroup.js]

Fixes: Horizontal controlgroup for browsers that don't support inline-block and gap between buttons when monospace font is used.

Fixes #3922

To do: IE7 still renders selectmenu buttons full width when used in horizontal controlgroup.

#C13

css Added padding for controlgroup buttons with iconpos notext and added rules so they can be used in controlgroup together with buttons that have text. [controlgroup.css]

Note: This change requires #C2 (font-size 16px).

Fixes #1998

#C14

css Added display block for vertical controlgroup ui-select to prevent unwanted margin on FF. [controlgroup.css]

Note: This requires #C12. Otherwise extra rule required to set display back to inline-block for ui-select in horizontal controlgroups.

Fixes #2804

Selectmenu

#C15

css Removed explicit margin 0 rule so the select button has same margin as regular buttons. [select.css]

Fixes #3684

#C16

js Prevent adding class ui-btn-icon-right when there is no icon. [select.js]

Fixes #4252

#C17

js Removed default mini and inline "false" to make mini and inline in header/footer possible. [select.js]

To do: Inline is applied to button while the wrapping ui-select div still has display: block. For the same reason inline won't apply by default in header/footer because that only applies to buttons that are direct children of the toolbar (see #C4)

#C18

css Removed border radius from button that is still visible behind Opera's native rectangle select. This way the (focus) box-shadow doesn't look odd. [select.css]

js Changed the function in the selectmenu widget to make it add the ui-select-nativeonly helper class to the button instead of the select element so it can be used to adjust the styling of the button. [select.js]

Fixes #4098

Count bubble

#C19

css Added/adjusted count bubble positioning and padding rules for select menu, listview buttons, and divider. [select.css][listview.css]

css Removed padding right from ui-btn-text in list items since it also has 100% width. Padding should be on ui-btn-inner/ui-link-inherit only. [listview.css]

Fixes #3979

Fixes #4263

Listview

#C20

css Adjusted padding right for list item with icon (has-arrow) to make it consistent with buttons with icon right and prevent that content and icon almost collapse. Adjusted padding right for list items with split buttons. Adjusted the negative margin top of split buttons to half the size of the button so the vertical aligment is exactly in the middle. [listview.css]

#C21

css Corrected max width/height for image icons left in listview buttons to 16px. Matches what is mentioned in the docs and the amount of padding left set for this type of list items. [listview.css]

Fixes #4489

Test issues

#C22

css Negate box-sizing border-box for slider input. [slider.css]

#C23

css Removed display inline-block from span inside ui-select ui-btn-text to get overflow ellipses. [button.css][select.css]

#C24

css Changed min-width into width since this works as well and Opera Mini doesn't understand min-width here. Changed line-height into height since this is a more consistent solution for all browsers. [controlgroup.css]

#C25

css Prevent horizontal scrollbar in IE7 with the 100% width text input and textarea wrapped in ui-field-contain. [controlgroup.css]

Resources

QR-code for the test page

Shorturl for the test page

goo.gl/UxMeS

JSBin

Link to JSBin template that loads CSS and JS that include all changes, for custom tests: JSBin template

Source

CSS and JS including all changes: CSS and JS

Docs

PDF files with a schematic representation of the buttons and the adjustments made to padding and absolute positioning.

Fullsize buttons and Mini buttons

Or download the Excel file which is easier to read... Fullsize & Mini buttons XLS

uGoMobi's Repo