Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-27 17:34:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Form elements now span entire container width and behave as display: block, outside of field containers.

Browse source
This commit is contained in:
Mat Marquis 2011-10-14 12:19:11 -04:00
parent fbec0e3520
commit 0f81773a42
4 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
themes/default/jquery.mobile.controlgroup.css
View file

@ -6,7 +6,7 @@
.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }
.ui-bar .ui-controlgroup { margin: 0 .3em; }
.ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; }
.ui-controlgroup-controls { display: block; width: 95%;}
.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; }
@ -24,6 +24,6 @@
*/
@media all and (min-width: 450px){
.ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-controlgroup-controls { width: 60%; display: inline-block; }
.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; }
}

4
themes/default/jquery.mobile.forms.select.css
View file

@ -31,8 +31,8 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
.ui-selectmenu .ui-header .ui-title { margin: 0.6em 46px 0.8em; }
@media all and (min-width: 450px){
label.ui-select { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-select { width: 60%; display: inline-block; }
.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; }
}
/* 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 */

10
themes/default/jquery.mobile.forms.slider.css
View file

@ -4,14 +4,16 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
label.ui-slider { display: block; }
input.ui-slider-input { display: inline-block; width: 50px; }
input.ui-slider-input,
.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
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: 66%; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 70%; }
div.ui-slider-switch { width: 99.8%; }
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
@media all and (min-width: 480px){
label.ui-slider { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
div.ui-slider { width: 45%; }
.ui-field-contain label.ui-slider { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-field-contain div.ui-slider { width: 45%; }
}
div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; }

14
themes/default/jquery.mobile.forms.textinput.css
View file

@ -4,10 +4,10 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
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: 95%; }
input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em 1.5%; line-height: 1.4; font-size: 16px; display: block; width: 97%; }
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; width: 77%; background-image: none; position: relative; }
.ui-input-search { padding: 0 30px; background-image: none; position: relative; }
.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; }
@ -15,10 +15,10 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
/* orientation adjustments - incomplete!*/
@media all and (min-width: 450px){
label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
input.ui-input-text,
textarea.ui-input-text,
.ui-input-search { width: 60%; display: inline-block; }
.ui-input-search { width: 50%; }
.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-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
}