Please consider reposting this on the new
bootstrap-users<https://groups.google.com/forum/#!forum/bootstrap-users> group.
As you may have noticed, this one has become overrun with spam.
On Wednesday, September 11, 2013 8:56:26 PM UTC-4, Mike C wrote:
>
> Hi:
>
> In my html, I use a form with class .form-horizontal.thin-controls, but
> this minimum example illustrates the problem. .thin-controls is the class I
> use to ... yup... make the control thin.
>
> As you'll see below, I use a <div class="span6 thin-controls">. The real
> page uses a <form class=".form-horizontal .thin-controls"> like:
>
> <div class="container-fluid">
> <div id="main" class="row-fluid test-wrap">
> <div class="span9 pull-left">
> <div id="primary" class="span8 pull-right">
> <form class="form-horizontal thin-controls">
>
> and all the .control and .control-group stuff just like in the
> documentation
>
> I also have a regular block style top to bottom form and am having the
> same problem.
>
> The problem is that bootstrap's .row-fluid [class*="span"] rule sets
> min-height: 30px;
> That messes things up and the only way my css rules to override it and set
> that style to 20px is to give the stinkin' input
> a span class like the span3, below.
>
> For this example, I've tried the rule:
>
> .row-fluid [class*="span"].thin-controls {
> min-height: 20px;
> }
>
> or maybe just:
>
> [class*="span"].thin-controls {}
>
> and for the actual page, this would be specificitally ( !!! 8) ) correct:
>
> .row-fluid [class*="span"] .thin-controls {
> min-height: 20px;
> }
>
> since the three are descendants, thus the space before .thin-controls. But
> none of it works. There are no descendants of .thin-controls with a spanX
> class that could confuse things, which they shouldn't, anyway; except for
> the kudge of a fix I came up with, to wit: I can delete those rules above
> and assign a spanX class to the input and voila`!
>
> I want to find a way to do it without assigning a spanX class to the
> input. This is bonkers and I've been going through the css in firebug for
> quite a while. I'd heve never found the
> .row-fluid [class*="span"] rule without firebug.
>
> OK. Thanks in advance for your time and help. The code is below.
>
> -- Mike
>
> Enjoy! Remove the span3 class from <input class="span3" type="text" /> and
> watch the input go back to 30px height.
>
> I can't find instructions for using [code][/code] tags here, so I hope
> this doesn't get hosed:
>
> <!doctype html>
> <html lang="en">
> <head>
> <meta charset="utf-8">
>
> <meta name="viewport" content="width=device-width, initial-scale=1.0"
> />
>
> <!-- jQuery -->
> <!-- script src="http://code.jquery.com/jquery-1.6.4.min.js";></script
> -->
> <script src="http://code.jquery.com/jquery-1.9.0.js";></script>
> <script src="http://code.jquery.com/jquery-migrate-1.2.1.js";></script>
>
> <!--[if lt IE 9]>
> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js
> "></script>
> <![endif]-->
>
> <!-- Bootstrap -->
> <link href="css/bootstrap/css/bootstrap.css" rel="stylesheet"
> media="screen">
> <link href="css/bootstrap/css/bootstrap-responsive.min.css"
> rel="stylesheet" media="screen">
> <script src="css/bootstrap/js/bootstrap.min.js"></script>
>
> <style>
> .thin-controls input[type="text"] {
> border-radius: 4px 4px 4px 4px;
> font-size: 12px;
> min-height: 20px;
> line-height: 12px;
> padding: 4px 6px;
>
> }
>
> /* NOTE: the above does not override bootstrap's min-height: 30px;
> style
> declaration for ir's .row-fluid [class*="span"] rule
> unless the input control is given a .spanX class */
>
> </style>
> </head>
> <body>
> <div class="container-fluid">
> <div id="main" class="row-fluid">
> <div class="span6 thin-controls">
> <input class="span3" type="text" />
> </div>
> </div>
> </div>
> </body>
> </html>
>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
