Fixes #12759
Ensures proper sizing and alignment of input groups within inline and navbar forms. * Uses `inline-table` on the input group * Nukes the widths to `width: auto`—without this, the parent input group doesn’t size correctly and functions as `display: table;` or `block`
This commit is contained in:
parent
b4d66b7f6b
commit
a15c24410b
|
@ -3339,6 +3339,17 @@ select[multiple].input-lg {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form-inline .input-group {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form-inline .input-group .input-group-addon,
|
||||
.form-inline .input-group .input-group-btn,
|
||||
.form-inline .input-group .form-control {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-inline .input-group > .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -4902,6 +4913,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.navbar-form .input-group {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.navbar-form .input-group .input-group-addon,
|
||||
.navbar-form .input-group .input-group-btn,
|
||||
.navbar-form .input-group .form-control {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navbar-form .input-group > .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2591,6 +2591,15 @@ select[multiple].input-lg {
|
|||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .input-group {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .input-group .input-group-addon,
|
||||
.form-inline .input-group .input-group-btn,
|
||||
.form-inline .input-group .form-control {
|
||||
width: auto;
|
||||
}
|
||||
.form-inline .input-group > .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -3919,6 +3928,15 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
|||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.navbar-form .input-group {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.navbar-form .input-group .input-group-addon,
|
||||
.navbar-form .input-group .input-group-btn,
|
||||
.navbar-form .input-group .form-control {
|
||||
width: auto;
|
||||
}
|
||||
.navbar-form .input-group > .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1649,6 +1649,12 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<label class="sr-only" for="exampleInputEmail2">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">@</div>
|
||||
<input class="form-control" type="email" placeholder="Enter email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="exampleInputPassword2">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -368,6 +368,18 @@ input[type="checkbox"],
|
|||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.form-control {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Input groups need that 100% width though
|
||||
.input-group > .form-control {
|
||||
width: 100%;
|
||||
|
|
Loading…
Reference in New Issue