clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 10:37:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support input groups in floating forms (#36759)

Browse Source 
* Support input groups in floating forms

* Update bundlewatch

Co-authored-by: 719media <ben@719media.com>
This commit is contained in:
Mark Otto 2022-07-17 20:50:41 -07:00 committed by GitHub
parent 6d101b15a4
commit 71cbb88f09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.bundlewatch.config.json
View File

@ -30,7 +30,7 @@
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "26.5 kB"
"maxSize": "26.75 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",

22
scss/forms/_input-group.scss
View File

@ -10,7 +10,8 @@
width: 100%;
> .form-control,
> .form-select {
> .form-select,
> .form-floating {
position: relative; // For focus state's z-index
flex: 1 1 auto;
width: 1%;
@ -19,7 +20,8 @@
// Bring the "active" form control to the top of surrounding elements
> .form-control:focus,
> .form-select:focus {
> .form-select:focus,
> .form-floating:focus-within {
z-index: 3;
}
@ -96,15 +98,19 @@
// stylelint-disable-next-line no-duplicate-selectors
.input-group {
&:not(.has-validation) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
> .dropdown-toggle:nth-last-child(n + 3),
> .form-floating:not(:last-child) > .form-control,
> .form-floating:not(:last-child) > .form-select {
@include border-end-radius(0);
}
}
&.has-validation {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 4) {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
> .dropdown-toggle:nth-last-child(n + 4),
> .form-floating:nth-last-child(n + 3) > .form-control,
> .form-floating:nth-last-child(n + 3) > .form-select {
@include border-end-radius(0);
}
}
@ -114,7 +120,9 @@
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
> :not(:first-child):not(.dropdown-menu):not(.form-floating)#{$validation-messages},
> .form-floating:not(:first-child) > .form-control,
> .form-floating:not(:first-child) > .form-select {
margin-left: -$input-border-width;
@include border-start-radius(0);
}

29
site/content/docs/5.2/forms/floating-labels.md
View File

@ -90,6 +90,35 @@ Floating labels also support `.form-control-plaintext`, which can be helpful for
</div>
{{< /example >}}
## Input groups
Floating labels also support `.input-group`.
{{< example >}}
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Username</label>
</div>
</div>
{{< /example >}}
When using `.input-group` and `.form-floating` along with form validation, the `-feedback` should be placed outside of the `.form-floating`, but inside of the `.input-group`. This means that the feedback will need to be shown using javascript.
{{< example >}}
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<div class="form-floating is-invalid">
<input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
<label for="floatingInputGroup2">Username</label>
</div>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
{{< /example >}}
## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.