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.
