mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 01:21:49 +02:00
Code Issues Releases Wiki Activity

Fix clipped dropdowns in input groups section of docs

Browse Source
This commit is contained in:
Mark Otto
2013-07-26 22:03:52 -07:00
parent 5bed9f4635
commit 44a4e71215
2 changed files with 152 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/docs.css
View File

@@ -418,9 +418,6 @@ body {
.bs-example-control-sizing input[type="text"] + input[type="text"] { .bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px; margin-top: 10px;
} }
.bs-example-form {
overflow: hidden;
}
.bs-example-form .input-group { .bs-example-form .input-group {
margin-bottom: 10px; margin-bottom: 10px;
} }

281
css.html
View File

@@ -1545,34 +1545,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-9"> <div class="input-group">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col-lg-6"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
<br> <br>
<div class="input-group col-lg-3"> <div class="input-group">
<span class="input-group-addon">$</span> <span class="input-group-addon">$</span>
<input type="text" class="form-control"> <input type="text" class="form-control">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col-lg-9"> <div class="input-group">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
<div class="input-group col-lg-6"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
<div class="input-group col-lg-3"> <div class="input-group">
<span class="input-group-addon">$</span> <span class="input-group-addon">$</span>
<input type="text" class="form-control"> <input type="text" class="form-control">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
@@ -1582,33 +1582,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Optional sizes</h3> <h3>Optional sizes</h3>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p> <p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-9"> <div class="input-group">
<span class="input-group-addon input-large">@</span> <span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username"> <input type="text" class="form-control input-large" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col-lg-9"> <div class="input-group">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col-lg-9"> <div class="input-group">
<span class="input-group-addon input-small">@</span> <span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username"> <input type="text" class="form-control input-small" placeholder="Username">
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col-lg-9"> <div class="input-group">
<span class="input-group-addon input-large">@</span> <span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username"> <input type="text" class="form-control input-large" placeholder="Username">
</div> </div>
<div class="input-group col-lg-9"> <div class="input-group">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
<div class="input-group col-lg-9"> <div class="input-group">
<span class="input-group-addon input-small">@</span> <span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username"> <input type="text" class="form-control input-small" placeholder="Username">
</div> </div>
@@ -1617,144 +1617,167 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Buttons instead of text</h3> <h3>Buttons instead of text</h3>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-7"> <div class="row">
<span class="input-group-btn"> <div class="col-lg-6">
<button class="btn btn-default" type="button">Go!</button> <div class="input-group">
</span> <span class="input-group-btn">
<input type="text" class="form-control"> <button class="btn btn-default" type="button">Go!</button>
</div> </span>
<br> <input type="text" class="form-control">
<div class="input-group col-lg-7"> </div><!-- /input-group -->
<input type="text" class="form-control"> </div><!-- /.col-lg-6 -->
<span class="input-group-btn"> <div class="col-lg-6">
<button class="btn btn-default" type="button">Go!</button> <div class="input-group">
</span> <input type="text" class="form-control">
</div> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col-lg-7"> <div class="row">
<span class="input-group-btn"> <div class="col-lg-6">
<button class="btn btn-default" type="button">Go!</button> <div class="input-group">
</span> <span class="input-group-btn">
<input type="text" class="form-control"> <button class="btn btn-default" type="button">Go!</button>
</div> </span>
<input type="text" class="form-control">
<div class="input-group col-lg-7"> </div><!-- /input-group -->
<input type="text" class="form-control"> </div><!-- /.col-lg-6 -->
<span class="input-group-btn"> <div class="col-lg-6">
<button class="btn btn-default" type="button">Go!</button> <div class="input-group">
</span> <input type="text" class="form-control">
</div> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %} {% endhighlight %}
<h3>Button dropdowns</h3> <h3>Button dropdowns</h3>
<p></p> <p></p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-7"> <div class="row">
<div class="input-group-btn"> <div class="col-lg-6">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <div class="input-group">
<ul class="dropdown-menu"> <div class="input-group-btn">
<li><a href="#">Action</a></li> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<li><a href="#">Another action</a></li> <ul class="dropdown-menu">
<li><a href="#">Something else here</a></li> <li><a href="#">Action</a></li>
<li class="divider"></li> <li><a href="#">Another action</a></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Something else here</a></li>
</ul> <li class="divider"></li>
</div><!-- /btn-group --> <li><a href="#">Separated link</a></li>
<input type="text" class="form-control"> </ul>
</div><!-- /input-group --> </div><!-- /btn-group -->
<br> <input type="text" class="form-control">
<div class="input-group col-lg-7"> </div><!-- /input-group -->
<input type="text" class="form-control"> </div><!-- /.col-lg-6 -->
<div class="input-group-btn"> <div class="col-lg-6">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <div class="input-group">
<ul class="dropdown-menu pull-right"> <input type="text" class="form-control">
<li><a href="#">Action</a></li> <div class="input-group-btn">
<li><a href="#">Another action</a></li> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<li><a href="#">Something else here</a></li> <ul class="dropdown-menu">
<li class="divider"></li> <li><a href="#">Action</a></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Another action</a></li>
</ul> <li><a href="#">Something else here</a></li>
</div><!-- /btn-group --> <li class="divider"></li>
</div><!-- /input-group --> <li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col-lg-7"> <div class="row">
<div class="input-group-btn"> <div class="col-lg-6">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <div class="input-group">
<ul class="dropdown-menu"> <div class="input-group-btn">
<li><a href="#">Action</a></li> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<li><a href="#">Another action</a></li> <ul class="dropdown-menu">
<li><a href="#">Something else here</a></li> <li><a href="#">Action</a></li>
<li class="divider"></li> <li><a href="#">Another action</a></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Something else here</a></li>
</ul> <li class="divider"></li>
</div><!-- /btn-group --> <li><a href="#">Separated link</a></li>
<input type="text" class="form-control"> </ul>
</div><!-- /input-group --> </div><!-- /btn-group -->
<input type="text" class="form-control">
<div class="input-group col-lg-7"> </div><!-- /input-group -->
<input type="text" class="form-control"> </div><!-- /.col-lg-6 -->
<div class="input-group-btn"> <div class="col-lg-6">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <div class="input-group">
<ul class="dropdown-menu pull-right"> <input type="text" class="form-control">
<li><a href="#">Action</a></li> <div class="input-group-btn">
<li><a href="#">Another action</a></li> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<li><a href="#">Something else here</a></li> <ul class="dropdown-menu">
<li class="divider"></li> <li><a href="#">Action</a></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Another action</a></li>
</ul> <li><a href="#">Something else here</a></li>
</div><!-- /btn-group --> <li class="divider"></li>
</div><!-- /input-group --> <li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %} {% endhighlight %}
<h3>Segmented dropdown groups</h3> <h3>Segmented dropdown groups</h3>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-7"> <div class="row">
<div class="input-group-btn"> <div class="col-lg-6">
<button type="button" class="btn btn-default" tabindex="-1">Action</button> <div class="input-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <div class="input-group-btn">
<span class="caret"></span> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<ul class="dropdown-menu"> <span class="caret"></span>
<li><a href="#">Action</a></li> </button>
<li><a href="#">Another action</a></li> <ul class="dropdown-menu">
<li><a href="#">Something else here</a></li> <li><a href="#">Action</a></li>
<li class="divider"></li> <li><a href="#">Another action</a></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Something else here</a></li>
</ul> <li class="divider"></li>
</div> <li><a href="#">Separated link</a></li>
<input type="text" class="form-control"> </ul>
</div> </div>
<input type="text" class="form-control">
<br> </div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
<div class="input-group col-lg-7"> <div class="col-lg-6">
<input type="text" class="form-control"> <div class="input-group">
<div class="input-group-btn"> <input type="text" class="form-control">
<button type="button" class="btn btn-default" tabindex="-1">Action</button> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
<span class="caret"></span> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
</button> <span class="caret"></span>
<ul class="dropdown-menu pull-right"> </button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu pull-right">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div> </ul>
</div> </div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col-lg-7"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn">
<!-- Button and dropdown menu --> <!-- Button and dropdown menu -->
</div> </div>
<input type="text" class="form-control"> <input type="text" class="form-control">
</div> </div>
<div class="input-group col-lg-7"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<div class="input-group-btn btn-group"> <div class="input-group-btn btn-group">
<!-- Button and dropdown menu --> <!-- Button and dropdown menu -->