Skip to content

B
bootstrap
Commit bcf1136f authored by Mark Otto's avatar Mark Otto
Browse files
Options

fix form field sizing for selects, document form field grid sizing

parent 0cb28664
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 140 deletions
bootstrap.css
View file @ bcf1136f
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 { html, body {
margin: 0; margin: 0;
...@@ -601,8 +601,10 @@ select, input[type=file] { ...@@ -601,8 +601,10 @@ select, input[type=file] {
line-height: 27px; line-height: 27px;
} }
select { select {
background-color: #ffffff; width: 220px;
padding: 0;
vertical-align: middle; vertical-align: middle;
background-color: #ffffff;
} }
select[multiple], select[size] { select[multiple], select[size] {
height: inherit; height: inherit;
...@@ -673,133 +675,84 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { ...@@ -673,133 +675,84 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
.input-xxlarge { .input-xxlarge {
width: 530px; width: 530px;
} }
input.span1, input[class*="span"],
textarea.span1, select[class*="span"],
select.span1, textarea[class*="span"],
.uneditable-input.span1 { .uneditable-input[class*="span"] {
float: none; float: none;
width: 50px;
margin-left: 0; margin-left: 0;
} }
input.span2, input.span1, textarea.span1, .uneditable-input.span1 {
textarea.span2, width: 50px;
select.span2, }
.uneditable-input.span2 { input.span2, textarea.span2, .uneditable-input.span2 {
float: none;
width: 130px; width: 130px;
margin-left: 0;
} }
input.span3, input.span3, textarea.span3, .uneditable-input.span3 {
textarea.span3,
select.span3,
.uneditable-input.span3 {
float: none;
width: 210px; width: 210px;
margin-left: 0;
} }
input.span4, input.span4, textarea.span4, .uneditable-input.span4 {
textarea.span4,
select.span4,
.uneditable-input.span4 {
float: none;
width: 290px; width: 290px;
margin-left: 0;
} }
input.span5, input.span5, textarea.span5, .uneditable-input.span5 {
textarea.span5,
select.span5,
.uneditable-input.span5 {
float: none;
width: 370px; width: 370px;
margin-left: 0;
} }
input.span6, input.span6, textarea.span6, .uneditable-input.span6 {
textarea.span6,
select.span6,
.uneditable-input.span6 {
float: none;
width: 450px; width: 450px;
margin-left: 0;
} }
input.span7, input.span7, textarea.span7, .uneditable-input.span7 {
textarea.span7,
select.span7,
.uneditable-input.span7 {
float: none;
width: 530px; width: 530px;
margin-left: 0;
} }
input.span8, input.span8, textarea.span8, .uneditable-input.span8 {
textarea.span8,
select.span8,
.uneditable-input.span8 {
float: none;
width: 610px; width: 610px;
margin-left: 0;
} }
input.span9, input.span9, textarea.span9, .uneditable-input.span9 {
textarea.span9,
select.span9,
.uneditable-input.span9 {
float: none;
width: 690px; width: 690px;
margin-left: 0;
} }
input.span10, input.span10, textarea.span10, .uneditable-input.span10 {
textarea.span10,
select.span10,
.uneditable-input.span10 {
float: none;
width: 770px; width: 770px;
margin-left: 0;
} }
input.span11, input.span11, textarea.span11, .uneditable-input.span11 {
textarea.span11,
select.span11,
.uneditable-input.span11 {
float: none;
width: 850px; width: 850px;
margin-left: 0;
} }
input.span12, input.span12, textarea.span12, .uneditable-input.span12 {
textarea.span12,
select.span12,
.uneditable-input.span12 {
float: none;
width: 930px; width: 930px;
margin-left: 0;
} }
input.span13, select.span1 {
textarea.span13, width: 70px;
select.span13,
.uneditable-input.span13 {
float: none;
width: 1010px;
margin-left: 0;
} }
input.span14, select.span2 {
textarea.span14, width: 150px;
select.span14,
.uneditable-input.span14 {
float: none;
width: 1090px;
margin-left: 0;
} }
input.span15, select.span3 {
textarea.span15, width: 230px;
select.span15,
.uneditable-input.span15 {
float: none;
width: 1170px;
margin-left: 0;
} }
input.span16, select.span4 {
textarea.span16, width: 310px;
select.span16, }
.uneditable-input.span16 { select.span5 {
float: none; width: 390px;
width: 1250px; }
margin-left: 0; 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], input[disabled],
select[disabled], select[disabled],
......
bootstrap.min.css
View file @ bcf1136f
...@@ -101,7 +101,7 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto; ...@@ -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=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;} 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,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;} select[multiple],select[size]{height:inherit;}
input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
textarea{height:auto;} textarea{height:auto;}
...@@ -119,22 +119,31 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado ...@@ -119,22 +119,31 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado
.input-large{width:210px;} .input-large{width:210px;}
.input-xlarge{width:270px;} .input-xlarge{width:270px;}
.input-xxlarge{width:530px;} .input-xxlarge{width:530px;}
input.span1,textarea.span1,select.span1,.uneditable-input.span1{float:none;width:50px;margin-left:0;} input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"]{float:none;margin-left:0;}
input.span2,textarea.span2,select.span2,.uneditable-input.span2{float:none;width:130px;margin-left:0;} input.span1,textarea.span1,.uneditable-input.span1{width:50px;}
input.span3,textarea.span3,select.span3,.uneditable-input.span3{float:none;width:210px;margin-left:0;} input.span2,textarea.span2,.uneditable-input.span2{width:130px;}
input.span4,textarea.span4,select.span4,.uneditable-input.span4{float:none;width:290px;margin-left:0;} input.span3,textarea.span3,.uneditable-input.span3{width:210px;}
input.span5,textarea.span5,select.span5,.uneditable-input.span5{float:none;width:370px;margin-left:0;} input.span4,textarea.span4,.uneditable-input.span4{width:290px;}
input.span6,textarea.span6,select.span6,.uneditable-input.span6{float:none;width:450px;margin-left:0;} input.span5,textarea.span5,.uneditable-input.span5{width:370px;}
input.span7,textarea.span7,select.span7,.uneditable-input.span7{float:none;width:530px;margin-left:0;} input.span6,textarea.span6,.uneditable-input.span6{width:450px;}
input.span8,textarea.span8,select.span8,.uneditable-input.span8{float:none;width:610px;margin-left:0;} input.span7,textarea.span7,.uneditable-input.span7{width:530px;}
input.span9,textarea.span9,select.span9,.uneditable-input.span9{float:none;width:690px;margin-left:0;} input.span8,textarea.span8,.uneditable-input.span8{width:610px;}
input.span10,textarea.span10,select.span10,.uneditable-input.span10{float:none;width:770px;margin-left:0;} input.span9,textarea.span9,.uneditable-input.span9{width:690px;}
input.span11,textarea.span11,select.span11,.uneditable-input.span11{float:none;width:850px;margin-left:0;} input.span10,textarea.span10,.uneditable-input.span10{width:770px;}
input.span12,textarea.span12,select.span12,.uneditable-input.span12{float:none;width:930px;margin-left:0;} input.span11,textarea.span11,.uneditable-input.span11{width:850px;}
input.span13,textarea.span13,select.span13,.uneditable-input.span13{float:none;width:1010px;margin-left:0;} input.span12,textarea.span12,.uneditable-input.span12{width:930px;}
input.span14,textarea.span14,select.span14,.uneditable-input.span14{float:none;width:1090px;margin-left:0;} select.span1{width:70px;}
input.span15,textarea.span15,select.span15,.uneditable-input.span15{float:none;width:1170px;margin-left:0;} select.span2{width:150px;}
input.span16,textarea.span16,select.span16,.uneditable-input.span16{float:none;width:1250px;margin-left:0;} 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;} 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>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;} .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;}
......
docs/assets/css/docs.css
View file @ bcf1136f
...@@ -456,7 +456,11 @@ form.well { ...@@ -456,7 +456,11 @@ form.well {
outline: 0; outline: 0;
} }
/* For input sizes, make them display block */
.docs-input-sizes input[type=text] {
display: block;
margin-bottom: 9px;
}
/* Icons /* Icons
------------------------- */ ------------------------- */
......
docs/base-css.html
View file @ bcf1136f
...@@ -1024,6 +1024,15 @@ ...@@ -1024,6 +1024,15 @@
<div class="span8"> <div class="span8">
<form class="horizontal-form"> <form class="horizontal-form">
<legend>Extending form controls</legend> <legend>Extending form controls</legend>
<fieldset class="control-group">
<label class="control-label">Form sizes</label>
<div class="controls docs-input-sizes">
<input class="span2" type="text" name="" placeholder=".span2">
<input class="span3" type="text" name="" placeholder=".span3">
<input class="span4" type="text" name="" placeholder=".span4">
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
</div>
</fieldset>
<fieldset class="control-group"> <fieldset class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label> <label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls"> <div class="controls">
......
lib/forms.less
View file @ bcf1136f
...@@ -96,8 +96,10 @@ input[type=file] { ...@@ -96,8 +96,10 @@ input[type=file] {
// Chrome on Linux and Mobile Safari need background-color // Chrome on Linux and Mobile Safari need background-color
select { select {
background-color: @white; width: 220px; // default input width + 10px of padding that doesn't get applied
padding: 0;
vertical-align: middle; vertical-align: middle;
background-color: @white;
} }
// Make multiple select elements height not fixed // Make multiple select elements height not fixed
...@@ -187,33 +189,52 @@ select:focus { ...@@ -187,33 +189,52 @@ select:focus {
.input-xxlarge { width: 530px; } .input-xxlarge { width: 530px; }
// Grid style input sizes // Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border input[class*="span"],
.formColumns(@columnSpan: 1) { select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"] {
float: none; float: none;
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
margin-left: 0; 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, input,
textarea, textarea,
select,
.uneditable-input { .uneditable-input {
// Default columns // Default columns
&.span1 { .formColumns(1); } &.span1 { .inputColumns(1); }
&.span2 { .formColumns(2); } &.span2 { .inputColumns(2); }
&.span3 { .formColumns(3); } &.span3 { .inputColumns(3); }
&.span4 { .formColumns(4); } &.span4 { .inputColumns(4); }
&.span5 { .formColumns(5); } &.span5 { .inputColumns(5); }
&.span6 { .formColumns(6); } &.span6 { .inputColumns(6); }
&.span7 { .formColumns(7); } &.span7 { .inputColumns(7); }
&.span8 { .formColumns(8); } &.span8 { .inputColumns(8); }
&.span9 { .formColumns(9); } &.span9 { .inputColumns(9); }
&.span10 { .formColumns(10); } &.span10 { .inputColumns(10); }
&.span11 { .formColumns(11); } &.span11 { .inputColumns(11); }
&.span12 { .formColumns(12); } &.span12 { .inputColumns(12); }
&.span13 { .formColumns(13); } }
&.span14 { .formColumns(14); }
&.span15 { .formColumns(15); } .selectColumns(@columnSpan: 1) {
&.span16 { .formColumns(16); } 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); }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment