diff options
| author | Mark Otto <[email protected]> | 2012-09-23 16:06:28 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-09-23 16:06:28 -0700 |
| commit | f4d3d7da2e3ddbd751e053729935df1f3dd4c051 (patch) | |
| tree | adf5381c6286eb4bbd0163257d7acce7e10d25f9 | |
| parent | a4bf6ef0a0ace19e2e939c0484095e8d45527548 (diff) | |
| download | bootstrap-f4d3d7da2e3ddbd751e053729935df1f3dd4c051.tar.xz bootstrap-f4d3d7da2e3ddbd751e053729935df1f3dd4c051.zip | |
ensure 100% width for .uneditable-inputs in <767px viewports
| -rw-r--r-- | docs/assets/css/bootstrap-responsive.css | 1 | ||||
| -rw-r--r-- | docs/assets/css/bootstrap.css | 1 | ||||
| -rw-r--r-- | less/forms.less | 1 | ||||
| -rw-r--r-- | less/responsive-767px-max.less | 1 | ||||
| -rw-r--r-- | less/tests/forms-responsive.html | 71 |
5 files changed, 75 insertions, 0 deletions
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 0161885af..f1efde190 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -820,6 +820,7 @@ margin-left: 0; } [class*="span"], + .uneditable-input[class*="span"], .row-fluid [class*="span"] { display: block; float: none; diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fe577b8da..4e533b252 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -992,6 +992,7 @@ input[type="color"], font-size: 14px; line-height: 20px; color: #555555; + vertical-align: middle; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; diff --git a/less/forms.less b/less/forms.less index c155fc004..c9fafec27 100644 --- a/less/forms.less +++ b/less/forms.less @@ -86,6 +86,7 @@ input[type="color"], line-height: @baseLineHeight; color: @gray; .border-radius(@inputBorderRadius); + vertical-align: middle; } // Reset appearance properties for textual inputs and textarea diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 5cd89e403..45ce4ebc7 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -58,6 +58,7 @@ } // Make all grid-sized elements block level again [class*="span"], + .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing .row-fluid [class*="span"] { float: none; display: block; diff --git a/less/tests/forms-responsive.html b/less/tests/forms-responsive.html new file mode 100644 index 000000000..846d5b43d --- /dev/null +++ b/less/tests/forms-responsive.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- Le styles --> + <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> + <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> + <style> + body { + padding-top: 30px; + padding-bottom: 30px; + } + </style> + + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png"> + <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png"> + </head> + + <body> + + <form class="container"> + + <div class="page-header"> + <h1>Fixed grid</h1> + </div> + + <h3>Vertical alignment</h3> + <input type="text" class="span2" placeholder="span2"> + <select class="span2"><option>span2</option></select> + <span class="uneditable-input span2">span1</span> + + <h3>Width across elements</h3> + <div> + <input type="text" class="span2" placeholder="span2"> + </div> + <div> + <select class="span2"><option>span2</option></select> + </div> + <div> + <span class="uneditable-input span2">span2</span> + </div> + + + <div class="page-header"> + <h1>Fluid grid</h1> + </div> + + <div class="row-fluid"> + <input type="text" class="span2" placeholder="span2"> + <select class="span2"><option>span2</option></select> + <span class="uneditable-input span2">span1</span> + </div> + + </form> <!-- /container --> + + </body> +</html> |