Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support input groups in floating forms #36759

Merged
merged 2 commits into from Jul 18, 2022
Merged

Support input groups in floating forms #36759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1bc2190
Support input groups in floating forms
719media Jul 19, 2021
56d7d05
Update bundlewatch
mdo Jul 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .bundlewatch.config.json
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "26.5 kB"
"maxSize": "26.75 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
Expand Down
22 changes: 15 additions & 7 deletions scss/forms/_input-group.scss
View file
Open in desktop
Expand Up @@ -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%;
Expand All @@ -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;
}

Expand Down Expand Up @@ -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);
}
}
Expand All @@ -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);
}
Expand Down
29 changes: 29 additions & 0 deletions site/content/docs/5.2/forms/floating-labels.md
View file
Open in desktop
Expand Up @@ -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.
Expand Down