From bcf1136f2c8236cd3fa28eac7e57a9a3fc17d104 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 00:47:53 -0800 Subject: [PATCH] fix form field sizing for selects, document form field grid sizing --- bootstrap.css | 155 ++++++++++++++------------------------- bootstrap.min.css | 43 ++++++----- docs/assets/css/docs.css | 6 +- docs/base-css.html | 9 +++ lib/forms.less | 63 ++++++++++------ 5 files changed, 136 insertions(+), 140 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index eb338c0385..4f086520a5 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sat Jan 7 00:29:11 PST 2012 + * Date: Sat Jan 7 00:47:37 PST 2012 */ html, body { margin: 0; @@ -601,8 +601,10 @@ select, input[type=file] { line-height: 27px; } select { - background-color: #ffffff; + width: 220px; + padding: 0; vertical-align: middle; + background-color: #ffffff; } select[multiple], select[size] { height: inherit; @@ -673,133 +675,84 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { .input-xxlarge { width: 530px; } -input.span1, -textarea.span1, -select.span1, -.uneditable-input.span1 { +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"] { float: none; + margin-left: 0; +} +input.span1, textarea.span1, .uneditable-input.span1 { width: 50px; - margin-left: 0; } -input.span2, -textarea.span2, -select.span2, -.uneditable-input.span2 { - float: none; +input.span2, textarea.span2, .uneditable-input.span2 { width: 130px; - margin-left: 0; } -input.span3, -textarea.span3, -select.span3, -.uneditable-input.span3 { - float: none; +input.span3, textarea.span3, .uneditable-input.span3 { width: 210px; - margin-left: 0; } -input.span4, -textarea.span4, -select.span4, -.uneditable-input.span4 { - float: none; +input.span4, textarea.span4, .uneditable-input.span4 { width: 290px; - margin-left: 0; } -input.span5, -textarea.span5, -select.span5, -.uneditable-input.span5 { - float: none; +input.span5, textarea.span5, .uneditable-input.span5 { width: 370px; - margin-left: 0; } -input.span6, -textarea.span6, -select.span6, -.uneditable-input.span6 { - float: none; +input.span6, textarea.span6, .uneditable-input.span6 { width: 450px; - margin-left: 0; } -input.span7, -textarea.span7, -select.span7, -.uneditable-input.span7 { - float: none; +input.span7, textarea.span7, .uneditable-input.span7 { width: 530px; - margin-left: 0; } -input.span8, -textarea.span8, -select.span8, -.uneditable-input.span8 { - float: none; +input.span8, textarea.span8, .uneditable-input.span8 { width: 610px; - margin-left: 0; } -input.span9, -textarea.span9, -select.span9, -.uneditable-input.span9 { - float: none; +input.span9, textarea.span9, .uneditable-input.span9 { width: 690px; - margin-left: 0; } -input.span10, -textarea.span10, -select.span10, -.uneditable-input.span10 { - float: none; +input.span10, textarea.span10, .uneditable-input.span10 { width: 770px; - margin-left: 0; } -input.span11, -textarea.span11, -select.span11, -.uneditable-input.span11 { - float: none; +input.span11, textarea.span11, .uneditable-input.span11 { width: 850px; - margin-left: 0; } -input.span12, -textarea.span12, -select.span12, -.uneditable-input.span12 { - float: none; +input.span12, textarea.span12, .uneditable-input.span12 { width: 930px; - margin-left: 0; } -input.span13, -textarea.span13, -select.span13, -.uneditable-input.span13 { - float: none; - width: 1010px; - margin-left: 0; +select.span1 { + width: 70px; } -input.span14, -textarea.span14, -select.span14, -.uneditable-input.span14 { - float: none; - width: 1090px; - margin-left: 0; +select.span2 { + width: 150px; } -input.span15, -textarea.span15, -select.span15, -.uneditable-input.span15 { - float: none; - width: 1170px; - margin-left: 0; +select.span3 { + width: 230px; } -input.span16, -textarea.span16, -select.span16, -.uneditable-input.span16 { - float: none; - width: 1250px; - margin-left: 0; +select.span4 { + width: 310px; +} +select.span5 { + width: 390px; +} +select.span6 { + width: 470px; +} +select.span7 { + width: 550px; +} +select.span8 { + width: 630px; +} +select.span9 { + width: 710px; +} +select.span10 { + width: 790px; +} +select.span11 { + width: 870px; +} +select.span12 { + width: 950px; } input[disabled], select[disabled], diff --git a/bootstrap.min.css b/bootstrap.min.css index 17d3c4b397..156efff597 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -101,7 +101,7 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto; input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} -select{background-color:#ffffff;vertical-align:middle;} +select{width:220px;padding:0;vertical-align:middle;background-color:#ffffff;} select[multiple],select[size]{height:inherit;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} @@ -119,22 +119,31 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado .input-large{width:210px;} .input-xlarge{width:270px;} .input-xxlarge{width:530px;} -input.span1,textarea.span1,select.span1,.uneditable-input.span1{float:none;width:50px;margin-left:0;} -input.span2,textarea.span2,select.span2,.uneditable-input.span2{float:none;width:130px;margin-left:0;} -input.span3,textarea.span3,select.span3,.uneditable-input.span3{float:none;width:210px;margin-left:0;} -input.span4,textarea.span4,select.span4,.uneditable-input.span4{float:none;width:290px;margin-left:0;} -input.span5,textarea.span5,select.span5,.uneditable-input.span5{float:none;width:370px;margin-left:0;} -input.span6,textarea.span6,select.span6,.uneditable-input.span6{float:none;width:450px;margin-left:0;} -input.span7,textarea.span7,select.span7,.uneditable-input.span7{float:none;width:530px;margin-left:0;} -input.span8,textarea.span8,select.span8,.uneditable-input.span8{float:none;width:610px;margin-left:0;} -input.span9,textarea.span9,select.span9,.uneditable-input.span9{float:none;width:690px;margin-left:0;} -input.span10,textarea.span10,select.span10,.uneditable-input.span10{float:none;width:770px;margin-left:0;} -input.span11,textarea.span11,select.span11,.uneditable-input.span11{float:none;width:850px;margin-left:0;} -input.span12,textarea.span12,select.span12,.uneditable-input.span12{float:none;width:930px;margin-left:0;} -input.span13,textarea.span13,select.span13,.uneditable-input.span13{float:none;width:1010px;margin-left:0;} -input.span14,textarea.span14,select.span14,.uneditable-input.span14{float:none;width:1090px;margin-left:0;} -input.span15,textarea.span15,select.span15,.uneditable-input.span15{float:none;width:1170px;margin-left:0;} -input.span16,textarea.span16,select.span16,.uneditable-input.span16{float:none;width:1250px;margin-left:0;} +input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"]{float:none;margin-left:0;} +input.span1,textarea.span1,.uneditable-input.span1{width:50px;} +input.span2,textarea.span2,.uneditable-input.span2{width:130px;} +input.span3,textarea.span3,.uneditable-input.span3{width:210px;} +input.span4,textarea.span4,.uneditable-input.span4{width:290px;} +input.span5,textarea.span5,.uneditable-input.span5{width:370px;} +input.span6,textarea.span6,.uneditable-input.span6{width:450px;} +input.span7,textarea.span7,.uneditable-input.span7{width:530px;} +input.span8,textarea.span8,.uneditable-input.span8{width:610px;} +input.span9,textarea.span9,.uneditable-input.span9{width:690px;} +input.span10,textarea.span10,.uneditable-input.span10{width:770px;} +input.span11,textarea.span11,.uneditable-input.span11{width:850px;} +input.span12,textarea.span12,.uneditable-input.span12{width:930px;} +select.span1{width:70px;} +select.span2{width:150px;} +select.span3{width:230px;} +select.span4{width:310px;} +select.span5{width:390px;} +select.span6{width:470px;} +select.span7{width:550px;} +select.span8{width:630px;} +select.span9{width:710px;} +select.span10{width:790px;} +select.span11{width:870px;} +select.span12{width:950px;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} .control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;} .control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 579baad7d9..1180effd12 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -456,7 +456,11 @@ form.well { outline: 0; } - +/* For input sizes, make them display block */ +.docs-input-sizes input[type=text] { + display: block; + margin-bottom: 9px; +} /* Icons ------------------------- */ diff --git a/docs/base-css.html b/docs/base-css.html index cc92bc2217..b8a6a2f8de 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1024,6 +1024,15 @@
Extending form controls +
+ +
+ + + +

Use the same .span* classes from the grid system for input sizes.

+
+
diff --git a/lib/forms.less b/lib/forms.less index 9e0b843628..433b1ff987 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -96,8 +96,10 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { - background-color: @white; + width: 220px; // default input width + 10px of padding that doesn't get applied + padding: 0; vertical-align: middle; + background-color: @white; } // Make multiple select elements height not fixed @@ -187,33 +189,52 @@ select:focus { .input-xxlarge { width: 530px; } // Grid style input sizes -// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border -.formColumns(@columnSpan: 1) { +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"] { float: none; - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; } + +// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border +.inputColumns(@columnSpan: 1) { + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; +} input, textarea, -select, .uneditable-input { // Default columns - &.span1 { .formColumns(1); } - &.span2 { .formColumns(2); } - &.span3 { .formColumns(3); } - &.span4 { .formColumns(4); } - &.span5 { .formColumns(5); } - &.span6 { .formColumns(6); } - &.span7 { .formColumns(7); } - &.span8 { .formColumns(8); } - &.span9 { .formColumns(9); } - &.span10 { .formColumns(10); } - &.span11 { .formColumns(11); } - &.span12 { .formColumns(12); } - &.span13 { .formColumns(13); } - &.span14 { .formColumns(14); } - &.span15 { .formColumns(15); } - &.span16 { .formColumns(16); } + &.span1 { .inputColumns(1); } + &.span2 { .inputColumns(2); } + &.span3 { .inputColumns(3); } + &.span4 { .inputColumns(4); } + &.span5 { .inputColumns(5); } + &.span6 { .inputColumns(6); } + &.span7 { .inputColumns(7); } + &.span8 { .inputColumns(8); } + &.span9 { .inputColumns(9); } + &.span10 { .inputColumns(10); } + &.span11 { .inputColumns(11); } + &.span12 { .inputColumns(12); } +} + +.selectColumns(@columnSpan: 1) { + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10; +} +select { + &.span1 { .selectColumns(1); } + &.span2 { .selectColumns(2); } + &.span3 { .selectColumns(3); } + &.span4 { .selectColumns(4); } + &.span5 { .selectColumns(5); } + &.span6 { .selectColumns(6); } + &.span7 { .selectColumns(7); } + &.span8 { .selectColumns(8); } + &.span9 { .selectColumns(9); } + &.span10 { .selectColumns(10); } + &.span11 { .selectColumns(11); } + &.span12 { .selectColumns(12); } }