Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Standardize buttons and form #4498

Merged
merged 26 commits into from

3 participants

@jaspermdegroot
Collaborator

All changes are described in the changelog at the test page and in the commit messages.

Test page: http://ugomobi.github.com/buttons-form/

Fixes:
#3284
#3983
#3301
#3922
#1998
#2804
#3684
#4252
#4098
#3979
#4263
#4489

jaspermdegroot added some commits
@jaspermdegroot jaspermdegroot Removed default left and right margin from buttons to create consiste…
…ncy between buttons in and outside forms.
0fe6591
@jaspermdegroot jaspermdegroot Set font-size 16px for all (fullsize) buttons for consistency. ccbc313
@jaspermdegroot jaspermdegroot Fixes #3284 - Added vertical-align middle for inline buttons to creat…
…e consistency between browsers, since the default vertical alignment differs.
7a19f58
@jaspermdegroot jaspermdegroot Fixes #3983 - Changed display inline-block rule to only be applied to…
… buttons that are direct children of the header/footer.
ab7b44c
@jaspermdegroot jaspermdegroot Adjusted padding rules for mini inline and controlgroup buttons. 4d70953
@jaspermdegroot jaspermdegroot New class ui-submit added to button widget. e810c0a
@jaspermdegroot jaspermdegroot Fixes #3301 - Full width forms. cb16e2f
@jaspermdegroot jaspermdegroot Hide legend instead of label for checkbox/radio and other controlgrou…
…ps. Added flip toggle (ui-slider) label to the selectors.
15c355d
@jaspermdegroot jaspermdegroot Adjusted top and bottom margin for consistency. Removed margin when w…
…rapped in ui-field-contain since there is already padding.
c16b459
@jaspermdegroot jaspermdegroot Removed rule for left/right margin on ui-input-text in header/footer …
…since we recommend to wrap in a div with class ui-bar to get padding.
d924b3e
@jaspermdegroot jaspermdegroot Border-top is already 0. Changed into border-bottom 0 for last child. e6dda68
@jaspermdegroot jaspermdegroot Float left instead of display inline-block for all buttons in horizon…
…tal controlgroup.
68f4ab6
@jaspermdegroot jaspermdegroot Fixes #1998 - Added padding for icon-only buttons in controlgroup. 6b95f46
@jaspermdegroot jaspermdegroot Fixes #2804 - Added display block for vertical controlgroup ui-select…
… to prevent unwanted margin on FF.
6adbba4
@jaspermdegroot jaspermdegroot Fixes #3684 - Removed explicit margin 0 rule for selectmenu buttons. e583d00
@jaspermdegroot jaspermdegroot Fixes #4252 - Prevent adding ui-btn-icon-right class when there is no…
… icon.
03f9c6c
@jaspermdegroot jaspermdegroot Removed default mini and inline "false" to make mini and inline in he…
…ader/footer possible.
8e516b3
@jaspermdegroot jaspermdegroot Removed border radius from button behing Opera's native selectmenu. a1973d5
@jaspermdegroot jaspermdegroot Fixes #3979 and #4263 - Added/adjusted count bubble positioning and p…
…adding rules for select menu, listview buttons, and divider.
72de793
@jaspermdegroot jaspermdegroot Adjusted padding for listview buttons with (split) icon and the verti…
…cal position of the split button icon.
5ee3a81
@jaspermdegroot jaspermdegroot Fixes #4489 - Max width and height for left image icons is 16px. 85a5478
@johnbender

Holy moly

@Wilto @scottjehl

We need you guys to review this stuff.

@toddparker

Zach and I tested http://ugomobi.github.com/buttons-form/ on the following platforms without any major issues, everything looked good. As long as that failing test is passing, this looks ready to land. Excellent work @uGoMobi

Safari 4.1.3
Opera Mobile
Opera Mini
Google Chrome
FireFox
Firefox (beta)
Apple Ipad ios4.3
Apple Ipad ios5.0.1
Samsung Galaxy Tab Android 3.1
HP Touchpad WebOS 3.0.2
Kindle Fire
Nook Android 2.2
Apple Iphone ios 5.0.1
Blackberry Playbook OS 2.0
HTC Incredible Android 2.3
Samsung Galaxy nexus Android 4.0X
HTC Surround Windows 7
Nokia Lumia Windows 7.5

Some minor issues I noticed:

SAFARI 4.1.3:
-Under form, in the slider input, 1 digit gets cut off from lack of space

IPHONE 4, HTC INCREDIBLE, DROID TOUCH (all cells with smaller screen than the GALAXY NEXUS):
-Under buttons in the Grid Blocks section:
-Button Outside UI Grid is wider than the other buttons (On all tests this occurred, including computers)
-The 2 Select buttons cut off the text within it on the right (only mobile)

OPERA MINI:

-Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button.

OPERA MOBILE:

-Under Form, Cannot select any "Choices" (Full size or mini). The popup menu comes up for a second, than disappears. In the old one it works fine.
-Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button.

jaspermdegroot added some commits
@jaspermdegroot jaspermdegroot Negate box-sizing border-box for slider input. 79fcf3c
@jaspermdegroot jaspermdegroot Removed position relative from ui-btn-inner to have the icon being ab…
…solute positioned to button and not to inner (small selectmenu buttons with padding for count and icon can cause inner sticking out the button). Removed display inline-block from span inside ui-select ui-btn-text to get overflow ellipses.
a9372cc
@jaspermdegroot jaspermdegroot 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.
a2059af
@jaspermdegroot jaspermdegroot Prevent horizontal scrollbar in IE7. 4270ee0
@jaspermdegroot jaspermdegroot Added comment to explain the whitespace remove function. c682b42
@jaspermdegroot
Collaborator

Thanks a lot for the test result Todd and Zach!

  • Under form, in the slider input, 1 digit gets cut off from lack of space

    Fixed

  • Button Outside UI Grid is wider than the other buttons (On all tests this occurred, including computers)

    In the current situation buttons have left/right margin by default. This way you can not align them with other components. Therefor I removed that margin and only added it where really needed (i.e. inline buttons and buttons in grids). Only downside of this is that when you combine two or more buttons with a single full width button. The first go in a grid and have margin and the last not. As a "solution" I added a note in the docs (part of the first commit above) that when you can wrap a button in a div with ui-grid class and then it will get the same margin.
    I should have mentioned on the test page that I added that button outside the grid on purpose to show the difference.

[UPDATE:] I just found out we have a class ui-grid-solo for this. Will update the note in the docs.

  • The 2 Select buttons cut off the text within it on the right (only mobile)

    I used this example because the issue I fixed was about the select button being misaligned next to a regular button. Using a custom multiple select menu like this is not really good practise.
    What happens is that the multiple select has class has-count from the beginning, even when the count bubble isn't visible yet. So there is also extra padding. This makes the available space for text so small that some browsers don't even show an ellipsis anymore. Same goes for the three buttons at the top of the grid where I didn't see text at all when testing Opera Mini, but I see similar issues when I resize Chrome browser to smallest possible width.
    I was able to optimize it a little bit, but I don't think we can really fix this.

  • Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button. (Opera Mobile and Mini)

    Fixed

  • Under Form, Cannot select any "Choices" (Full size or mini). The popup menu comes up for a second, than disappears. In the old one it works fine. (Opera Mobile)

    I could not reproduce this on the Opera Mobile emulator, but that was after I already made a few changes. So maybe I fixed it without knowing. Other possibility is issues with fiexed toolbars. I changed the header and footer of the test page to inline.
    Can you please test again?

The branch passed all unit tests.

@toddparker - Do you want all commits to be cherry-picked into 1.1.1.?

@toddparker

@uGoMobi - Great news. Why don't you land this (I'll give you the pleasure of hitting the big green button). Yes, let's cherry pick this to stable since they are bug fixes. We'll re-test the opera mobile issue once this lands.

@jaspermdegroot jaspermdegroot merged commit ea5e7f1 into jquery:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 7, 2012
  1. @jaspermdegroot

    Removed default left and right margin from buttons to create consiste…

    jaspermdegroot authored
    …ncy between buttons in and outside forms.
  2. @jaspermdegroot
  3. @jaspermdegroot

    Fixes #3284 - Added vertical-align middle for inline buttons to creat…

    jaspermdegroot authored
    …e consistency between browsers, since the default vertical alignment differs.
  4. @jaspermdegroot

    Fixes #3983 - Changed display inline-block rule to only be applied to…

    jaspermdegroot authored
    … buttons that are direct children of the header/footer.
  5. @jaspermdegroot
  6. @jaspermdegroot
  7. @jaspermdegroot
  8. @jaspermdegroot

    Hide legend instead of label for checkbox/radio and other controlgrou…

    jaspermdegroot authored
    …ps. Added flip toggle (ui-slider) label to the selectors.
  9. @jaspermdegroot

    Adjusted top and bottom margin for consistency. Removed margin when w…

    jaspermdegroot authored
    …rapped in ui-field-contain since there is already padding.
  10. @jaspermdegroot

    Removed rule for left/right margin on ui-input-text in header/footer …

    jaspermdegroot authored
    …since we recommend to wrap in a div with class ui-bar to get padding.
  11. @jaspermdegroot
  12. @jaspermdegroot
  13. @jaspermdegroot
  14. @jaspermdegroot

    Fixes #2804 - Added display block for vertical controlgroup ui-select…

    jaspermdegroot authored
    … to prevent unwanted margin on FF.
  15. @jaspermdegroot
  16. @jaspermdegroot
  17. @jaspermdegroot
  18. @jaspermdegroot
  19. @jaspermdegroot

    Fixes #3979 and #4263 - Added/adjusted count bubble positioning and p…

    jaspermdegroot authored
    …adding rules for select menu, listview buttons, and divider.
  20. @jaspermdegroot

    Adjusted padding for listview buttons with (split) icon and the verti…

    jaspermdegroot authored
    …cal position of the split button icon.
  21. @jaspermdegroot
Commits on Jun 8, 2012
  1. @jaspermdegroot
  2. @jaspermdegroot

    Removed position relative from ui-btn-inner to have the icon being ab…

    jaspermdegroot authored
    …solute positioned to button and not to inner (small selectmenu buttons with padding for count and icon can cause inner sticking out the button). Removed display inline-block from span inside ui-select ui-btn-text to get overflow ellipses.
  3. @jaspermdegroot

    Changed min-width into width since this works as well and Opera Mini …

    jaspermdegroot authored
    …doesn't understand min-width here. Changed line-height into height since this is a more consistent solution for all browsers.
  4. @jaspermdegroot
  5. @jaspermdegroot
This page is out of date. Refresh to see the latest.
View
38 css/structure/jquery.mobile.button.css
@@ -1,16 +1,16 @@
-.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
-.ui-mini { margin: .25em 5px; }
-.ui-btn-inner { padding: .6em 20px; min-width: .75em; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
+.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 0; padding: 0; }
+.ui-btn.ui-mini { margin-top: .25em; margin-bottom: .25em; }
+.ui-btn-left, .ui-btn-right, .ui-input-clear, .ui-btn-inline,
+.ui-grid-a .ui-btn, .ui-grid-b .ui-btn, .ui-grid-c .ui-btn, .ui-grid-d .ui-btn, .ui-grid-e .ui-btn { margin-right: 5px; margin-left: 5px; }
+.ui-btn-inner { font-size: 16px; padding: .6em 20px; min-width: .75em; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; zoom: 1; }
.ui-btn input, .ui-btn button { z-index: 2; }
-.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
+.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; vertical-align: middle; }
.ui-btn-block { display: block; }
-.ui-header .ui-btn,
-.ui-footer .ui-btn { display: inline-block; margin: 0; }
+.ui-header > .ui-btn,
+.ui-footer > .ui-btn { display: inline-block; margin: 0; }
.ui-header .ui-btn-block,
-.ui-footer .ui-btn-block { display: block; margin: .25em 5px; }
-.ui-header .ui-btn-block.ui-fullsize,
-.ui-footer .ui-btn-block.ui-fullsize { margin: .5em 5px; }
+.ui-footer .ui-btn-block { display: block; }
.ui-header .ui-btn-inner,
.ui-footer .ui-btn-inner,
@@ -33,16 +33,20 @@
.ui-header .ui-btn-icon-left .ui-btn-inner,
.ui-footer .ui-btn-icon-left .ui-btn-inner,
+.ui-mini.ui-btn-icon-left .ui-btn-inner,
.ui-mini .ui-btn-icon-left .ui-btn-inner { padding-left: 30px; }
.ui-header .ui-btn-icon-right .ui-btn-inner,
.ui-footer .ui-btn-icon-right .ui-btn-inner,
+.ui-mini.ui-btn-icon-right .ui-btn-inner,
.ui-mini .ui-btn-icon-right .ui-btn-inner { padding-right: 30px; }
.ui-header .ui-btn-icon-top .ui-btn-inner,
-.ui-footer .ui-btn-icon-top .ui-btn-inner,
-.ui-mini .ui-btn-icon-top .ui-btn-inner { padding: 30px 3px .5em 3px; }
+.ui-footer .ui-btn-icon-top .ui-btn-inner { padding: 30px 3px .5em 3px; }
+.ui-mini.ui-btn-icon-top .ui-btn-inner,
+.ui-mini .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; }
.ui-header .ui-btn-icon-bottom .ui-btn-inner,
-.ui-footer .ui-btn-icon-bottom .ui-btn-inner,
-.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; }
+.ui-footer .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; }
+.ui-mini.ui-btn-icon-bottom .ui-btn-inner,
+.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
/*btn icon positioning*/
.ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
@@ -72,3 +76,11 @@
/*hiding native button,inputs */
.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; text-indent: -9999px; }
+
+.ui-field-contain .ui-btn.ui-submit { margin: 0; }
+label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
+@media all and (min-width: 450px){
+ .ui-field-contain label.ui-submit { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
+ .ui-field-contain .ui-btn.ui-submit { width: 78%; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
+ .ui-hide-label .ui-btn.ui-submit { width: auto; }
+}
View
35 css/structure/jquery.mobile.controlgroup.css
@@ -1,30 +1,39 @@
-.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: 0em 0 .5em; zoom: 1; }
+.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0; zoom: 1; }
+.ui-controlgroup.ui-mini, fieldset.ui-controlgroup.ui-mini { margin: .25em 0; }
+.ui-field-contain .ui-controlgroup, .ui-field-contain fieldset.ui-controlgroup { margin: 0; }
+.ui-bar .ui-controlgroup { margin: 0 5px; }
-.ui-bar .ui-controlgroup { margin: 0 .3em; }
.ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
.ui-controlgroup-controls { display: block; width: 100%;}
.ui-controlgroup li { list-style: none; }
.ui-controlgroup-vertical .ui-btn,
-.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
+.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
+.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
.ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; }
-.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
-.ui-controlgroup-horizontal { padding: 0; }
-.ui-controlgroup-horizontal .ui-btn-inner { text-align:center; }
-.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select { display: inline-block; margin: 0 -6px 0 0; }
+.ui-controlgroup .ui-btn-icon-notext { width: auto; height: auto; top: auto; }
+.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { width: 18px; height: 20px; padding: .6em 20px .6em 20px }
+.ui-controlgroup.ui-mini .ui-btn-icon-notext .ui-btn-inner { height: 16px; padding: .55em 11px .5em 11px; }
+.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; right: 50%; margin: -9px -9px 0 0; }
+
+.ui-controlgroup-horizontal .ui-controlgroup-controls:before,
+.ui-controlgroup-horizontal .ui-controlgroup-controls:after { content: ""; display: table; }
+.ui-controlgroup-horizontal .ui-controlgroup-controls:after { clear: both; }
+.ui-controlgroup-horizontal .ui-controlgroup-controls { zoom: 1; }
+.ui-controlgroup-horizontal .ui-btn-inner { text-align: center; height: 20px; }
+.ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; }
+.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select,
.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; clear: none; margin: 0 -1px 0 0; }
+.ui-controlgroup-horizontal .ui-select .ui-btn,
.ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn,
.ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; }
.ui-controlgroup-horizontal .ui-controlgroup-last { margin-right: 0; }
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
-/* conflicts with listview..
-.ui-controlgroup .ui-btn-icon-notext { width: 30px; height: 30px; text-indent: -9999px; }
-.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { padding: 5px 6px 5px 5px; }
-*/
@media all and (min-width: 450px){
.ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
- .ui-field-contain .ui-controlgroup-controls { width: 60%; display: inline-block; }
- .ui-field-contain .ui-controlgroup .ui-select { width: 100%; }
+ .ui-field-contain .ui-controlgroup-controls { width: 78%; display: inline-block; }
+ .ui-field-contain .ui-controlgroup .ui-select { width: 100%; display: block; }
.ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; }
+ .ui-hide-label .ui-controlgroup-controls { width: 100%; }
}
View
2  css/structure/jquery.mobile.core.css
@@ -68,5 +68,5 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-nojs { position: absolute; left: -9999px; }
/* accessible content hiding */
-.ui-hide-label label,
+.ui-hide-label label.ui-input-text, .ui-hide-label label.ui-select, .ui-hide-label label.ui-slider, .ui-hide-label label.ui-submit, .ui-hide-label .ui-controlgroup-label,
.ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
View
6 css/structure/jquery.mobile.forms.checkboxradio.css
@@ -1,5 +1,7 @@
-.ui-checkbox, .ui-radio { position: relative; clear: both; margin: .2em 0 .5em; z-index: 1; }
-.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; z-index: 2; }
+.ui-checkbox, .ui-radio { position: relative; clear: both; margin: 0; z-index: 1; }
+.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: .5em 0; text-align: left; z-index: 2; }
+.ui-checkbox .ui-btn.ui-mini, .ui-radio .ui-btn.ui-mini { margin: .25em 0; }
+.ui-controlgroup .ui-checkbox .ui-btn, .ui-controlgroup .ui-radio .ui-btn { margin: 0; }
.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
.ui-checkbox .ui-mini.ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-mini.ui-btn-icon-left .ui-btn-inner { padding-left: 36px; }
View
4 css/structure/jquery.mobile.forms.fieldcontain.css
@@ -1,5 +1,5 @@
.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
-.ui-field-contain:first-child { border-top-width: 0; }
+.ui-field-contain:last-child { border-bottom-width: 0; }
.ui-header .ui-field-contain-left,
.ui-header .ui-field-contain-right {
position: absolute;
@@ -13,6 +13,8 @@
right: 1em;
}
+.ui-field-contain, .ui-mobile fieldset.ui-field-contain { width: 100%; } /* This prevents horizontal scrollbar in IE7 */
+
@media all and (min-width: 450px){
.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
}
View
24 css/structure/jquery.mobile.forms.select.css
@@ -1,18 +1,24 @@
.ui-select { display: block; position: relative; }
.ui-select select { position: absolute; left: -9999px; top: -9999px; }
-.ui-select .ui-btn { overflow: hidden; opacity: 1; margin: 0; }
+.ui-select .ui-btn { overflow: hidden; opacity: 1; }
+.ui-field-contain .ui-select .ui-btn { margin: 0; }
/* Fixes #2588 — When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select—including “inherit”—without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: none; left: 0; top:0; width: 100%; min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index: 2; }
.ui-select .ui-disabled { opacity: .3; }
@-moz-document url-prefix() {.ui-select .ui-btn select { opacity: 0.0001; }}
-.ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; text-indent: 0; }
-
-.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
-.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }
-.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
-
+.ui-select .ui-btn.ui-select-nativeonly { border-radius: 0; }
+.ui-select .ui-btn.ui-select-nativeonly select { opacity: 1; text-indent: 0; }
+
+.ui-select .ui-btn-icon-right .ui-btn-inner, .ui-select .ui-li-has-count .ui-btn-inner { padding-right: 45px; }
+.ui-select .ui-mini.ui-btn-icon-right .ui-btn-inner { padding-right: 32px; }
+.ui-select .ui-btn-icon-right.ui-li-has-count .ui-btn-inner { padding-right: 80px; }
+.ui-select .ui-mini.ui-btn-icon-right.ui-li-has-count .ui-btn-inner { padding-right: 67px; }
+.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }
+.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
+.ui-select .ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 45px; }
+.ui-select .ui-mini.ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 32px; }
/* labels */
label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
@@ -21,7 +27,6 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; overflow: hidden !important;
/* This !important is required for iPad Safari specifically. See https://github.com/jquery/jquery-mobile/issues/2647 */ }
.ui-select .ui-btn-text { text-overflow: ellipsis; }
-.ui-select .ui-btn-text span { display: inline-block; }
.ui-selectmenu { padding: 6px; min-width: 160px; }
.ui-selectmenu .ui-listview { margin: 0; }
@@ -35,7 +40,8 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
@media all and (min-width: 450px){
.ui-field-contain label.ui-select { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
- .ui-field-contain .ui-select { width: 60%; display: inline-block; }
+ .ui-field-contain .ui-select { width: 78%; display: inline-block; }
+ .ui-hide-label .ui-select { width: 100%; }
}
/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */
View
5 css/structure/jquery.mobile.forms.slider.css
@@ -1,6 +1,9 @@
label.ui-slider { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
input.ui-slider-input,
-.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
+.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; background-image: none; padding: .4em; margin: .5em 0; line-height: 1.4; font-size: 16px; outline: 0; }
+.ui-field-contain input.ui-slider-input { margin: 0; }
+/* To do: Exclude ui-slider-input from textinput widget initSelector. The class ui-input-text is added to the slider input and label. When this is fixed, the rule below can be deleted. */
+input.ui-slider-input, .ui-field-contain input.ui-slider-input { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; }
div.ui-slider-mini { height: 12px; margin-left: 10px; }
View
17 css/structure/jquery.mobile.forms.textinput.css
@@ -1,10 +1,13 @@
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
-input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 97%; outline: 0; }
-.ui-header input.ui-input-text,
-.ui-footer input.ui-input-text { margin-left: 1.25%; padding: .4em 1%; width: 95.5% } /* Note that padding left/right on text inputs is factored into how the element is displayed in Firefox, but does not actually pad the text inside it. */
+input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; margin: .5em 0; line-height: 1.4; font-size: 16px; display: block; width: 100%; outline: 0; }
+input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini { margin: .25em 0; }
+.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text { margin: 0; }
+input.ui-input-text, textarea.ui-input-text, .ui-input-search { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
input.ui-input-text { -webkit-appearance: none; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
-.ui-input-search { padding: 0 30px; background-image: none; position: relative; }
+.ui-input-search { padding: 0 30px; margin: .5em 0; background-image: none; position: relative; }
+.ui-input-search.ui-mini { margin: .25em 0; }
+.ui-field-contain .ui-input-search { margin: 0; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
@@ -14,15 +17,13 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
textarea.ui-mini { height: 45px; }
-/* orientation adjustments - incomplete!*/
@media all and (min-width: 450px){
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
.ui-field-contain input.ui-input-text,
.ui-field-contain textarea.ui-input-text,
- .ui-field-contain .ui-input-search { width: 60%; display: inline-block; }
- .ui-field-contain .ui-input-search { width: 50%; }
+ .ui-field-contain .ui-input-search { width: 78%; display: inline-block; }
.ui-hide-label input.ui-input-text,
.ui-hide-label textarea.ui-input-text,
- .ui-hide-label .ui-input-search { padding: .4em; width: 97%; }
+ .ui-hide-label .ui-input-search { width: 100%; }
.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
}
View
19 css/structure/jquery.mobile.listview.css
@@ -17,26 +17,27 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px .7em 15px; display: block; }
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; }
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
-.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count { padding-right: 45px; }
-.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 30px; }
+.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; }
+.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 40px; }
.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
-.ui-li-has-count .ui-btn-text { padding-right: 15px; }
.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
-.ui-listview .ui-li-icon { max-height: 40px; max-width: 40px; left: 10px; top: .9em; }
+.ui-listview .ui-li-icon { max-height: 16px; max-width: 16px; left: 10px; top: .9em; }
.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
.ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; }
@media all and (min-width: 480px){
.ui-li-aside { width: 45%; }
}
.ui-li-divider { cursor: default; }
-.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 95px; }
-.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 48px; }
-.ui-li-divider .ui-li-count, .ui-li-static .ui-li-count { right: 10px; }
-.ui-li-has-alt .ui-li-count { right: 55px; }
+.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 53px; }
+.ui-li-has-alt.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt.ui-li-has-count { padding-right: 88px; }
+.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 10px; }
+.ui-li-has-count.ui-li-divider .ui-li-count, .ui-li-has-count .ui-link-inherit .ui-li-count { margin-top: -.95em; }
+.ui-li-has-arrow.ui-li-has-count .ui-li-count { right: 40px; }
+.ui-li-has-alt.ui-li-has-count .ui-li-count { right: 53px; }
.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; }
-.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -11px 0 0 0; border-bottom-width: 1px; z-index: -1;}
+.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -13px 0 0 0; border-bottom-width: 1px; z-index: -1;}
.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
.ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
View
3  docs/content/content-grids.html
@@ -74,7 +74,8 @@
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>
-
+
+ <p>The framework adds left and right margin to buttons in a grid. To align a single (full width) button with those in the grid you can wrap the button in a div with class <code>ui-grid-a</code> without a <code>ui-block</code> class.</p>
<p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
View
3  js/jquery.mobile.controlGroup.js
@@ -28,10 +28,11 @@ $.fn.controlgroup = function( options ) {
groupheading = $el.children( "legend" ),
flCorners = o.direction == "horizontal" ? [ "ui-corner-left", "ui-corner-right" ] : [ "ui-corner-top", "ui-corner-bottom" ],
type = $el.find( "input" ).first().attr( "type" );
+
+ $el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );
// Replace legend with more stylable replacement div
if ( groupheading.length ) {
- $el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );
$( "<div role='heading' class='ui-controlgroup-label'>" + groupheading.html() + "</div>" ).insertBefore( $el.children(0) );
groupheading.remove();
}
View
7 js/jquery.mobile.fieldContain.js
@@ -9,8 +9,13 @@ define( [ "jquery" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
+// filter function removes whitespace between label and form element so we can use inline-block (nodeType 3 = text)
$.fn.fieldcontain = function( options ) {
- return this.addClass( "ui-field-contain ui-body ui-br" );
+ return this
+ .addClass( "ui-field-contain ui-body ui-br" )
+ .contents().filter( function() {
+ return ( this.nodeType === 3 && !/\S/.test( this.nodeValue ) );
+ }).remove();
};
//auto self-init widgets
View
5 js/jquery.mobile.forms.button.js
@@ -57,6 +57,11 @@ $.widget( "mobile.button", $.mobile.widget, {
classes = "ui-btn-right";
}
+ if( $el.attr( "type" ) == "submit" || $el.attr( "type" ) == "reset" ) {
+ classes += "ui-submit";
+ }
+ $( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
+
// Add ARIA role
this.button = $( "<div></div>" )
[ $el.html() ? "html" : "text" ]( $el.html() || $el.val() )
View
14 js/jquery.mobile.forms.select.js
@@ -89,6 +89,10 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
options = this.options,
+ inline = options.inline || this.select.jqmData( "inline" ),
+ mini = options.mini || this.select.jqmData( "mini" ),
+ iconpos = options.icon ? ( options.iconpos || this.select.jqmData( "iconpos" ) ) : false,
+
// IE throws an exception at options.item() function when
// there is no selected item
// select first in this case
@@ -100,12 +104,12 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
.buttonMarkup( {
theme: options.theme,
icon: options.icon,
- iconpos: options.iconpos,
- inline: options.inline,
+ iconpos: iconpos,
+ inline: inline,
corners: options.corners,
shadow: options.shadow,
iconshadow: options.iconshadow,
- mini: options.mini
+ mini: mini
});
this.setButtonText();
@@ -115,8 +119,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
// On the desktop,it seems to do the opposite
// for these reasons, using the nativeMenu option results in a full native select in Opera
if ( options.nativeMenu && window.opera && window.opera.version ) {
- this.select.addClass( "ui-select-nativeonly" );
- }
+ button.addClass( "ui-select-nativeonly" );
+ }
// Add counter for multi selects
if ( this.isMultiple ) {
Something went wrong with that request. Please try again.