Skip to content

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

Fix clipped dropdowns in input groups section of docs

parent 5bed9f46
Show whitespace changes
Inline Side-by-side
Showing with 152 additions and 132 deletions
assets/css/docs.css
View file @ 44a4e712
......@@ -418,9 +418,6 @@ body {
.bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px;
}
.bs-example-form {
overflow: hidden;
}
.bs-example-form .input-group {
margin-bottom: 10px;
}
......
css.html
View file @ 44a4e712
......@@ -1545,34 +1545,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group col-lg-3">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
{% highlight html %}
<div class="input-group col-lg-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group col-lg-3">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<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>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<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>
<input type="text" class="form-control input-large" placeholder="Username">
</div>
<br>
<div class="input-group col-lg-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group col-lg-9">
<div class="input-group">
<span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username">
</div>
</form>
{% highlight html %}
<div class="input-group col-lg-9">
<div class="input-group">
<span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username">
</div>
<div class="input-group col-lg-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group col-lg-9">
<div class="input-group">
<span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username">
</div>
......@@ -1617,40 +1617,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group col-lg-7">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="input-group col-lg-7">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
<div class="input-group col-lg-7">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %}
<h3>Button dropdowns</h3>
<p></p>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
......@@ -1663,12 +1675,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
<br>
<div class="input-group col-lg-7">
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
......@@ -1677,9 +1690,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="input-group col-lg-7">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
......@@ -1691,13 +1708,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
<div class="input-group col-lg-7">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
......@@ -1705,12 +1723,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %}
<h3>Segmented dropdown groups</h3>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
......@@ -1725,11 +1747,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group col-lg-7">
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
......@@ -1744,17 +1765,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="input-group col-lg-7">
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
</div>
<div class="input-group col-lg-7">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-group">
<!-- Button and dropdown menu -->
......
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