Skip to content
Browse files

Textinput: Always wrap input in a div. This fixes: alignment of full …

…width inputs on old IE/WP, input type color on Chrome, input type file on FF, inputs with and without clear button equal height.
  • Loading branch information...
1 parent 1ef2c51 commit 6161878a9423c62af1f665b9cd877c33613abd4c @jaspermdegroot jaspermdegroot committed
Showing with 5 additions and 5 deletions.
  1. +3 −3 css/structure/jquery.mobile.forms.textinput.css
  2. +2 −2 js/widgets/forms/textinput.js
View
6 css/structure/jquery.mobile.forms.textinput.css
@@ -1,16 +1,16 @@
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; margin: .5em 0; min-height: 2.2em; line-height: 1.4em; font-size: 16px; display: block; width: 100%; outline: 0; }
+input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; margin: .5em 0; min-height: 1.4em; line-height: 1.4em; font-size: 16px; display: block; width: 100%; outline: 0; }
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text,
.ui-input-search input.ui-input-text { border: none; width: 100%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search, div.ui-input-text { margin: .5em 0; background-image: none; position: relative; }
.ui-input-search { padding: 0 30px; }
-div.ui-input-text input.ui-input-text { padding: .4em 30px .4em .4em; }
+div.ui-input-text { padding: 0 30px 0 .4em; }
input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini,
.ui-input-search.ui-mini, div.ui-input-text.ui-mini { margin: .25em 0; }
.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search, .ui-field-contain div.ui-input-text { margin: 0; }
-input.ui-input-text, textarea.ui-input-text, .ui-input-search, div.ui-input-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
+textarea.ui-input-text { -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; }
textarea.ui-mini { height: 45px; }
View
4 js/widgets/forms/textinput.js
@@ -64,7 +64,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
//"search" and "text" input widgets
if ( isSearch ) {
focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + miniclass + "'></div>" ).parent();
- } else if ( inputNeedsClearBtn ) {
+ } else if ( input.is( "input" ) ) {
focusedEl = input.wrap( "<div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + miniclass + "'></div>" ).parent();
}
@@ -91,7 +91,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
input.bind( "paste cut keyup focus change blur", toggleClear );
}
- else if ( !inputNeedsClearBtn && !isSearch ) {
+ else if ( input.is( "textarea" ) ) {
input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
}

0 comments on commit 6161878

Please sign in to comment.
Something went wrong with that request. Please try again.