mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-22 06:39:52 +00:00
Code Issues 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", "path": "./dist/css/bootstrap.min.css",
"maxSize": "26.5 kB" "maxSize": "26.75 kB"
}, },
{ {
"path": "./dist/js/bootstrap.bundle.js", "path": "./dist/js/bootstrap.bundle.js",

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

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