rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Require .has-validation for input groups with validation

Browse Source
This commit is contained in:
Martijn Cuppens 2020-10-24 19:50:18 +02:00 committed by Mark Otto
parent 171da55628
commit a1b2071fe0
3 changed files with 26 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
scss/_input-group.scss
View File

@ -42,7 +42,6 @@
> .form-control,
> .custom-select {
&:not(:last-child) { @include border-right-radius(0); }
&:not(:first-child) { @include border-left-radius(0); }
}
@ -53,9 +52,24 @@
align-items: center;
&:not(:last-child) .custom-file-label,
&:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
}
&:not(.has-validation) {
> .form-control:not(:last-child),
> .custom-select:not(:last-child),
> .custom-file:not(:last-child) .custom-file-label::after {
@include border-right-radius(0);
}
}
&.has-validation {
> .form-control:nth-last-child(n + 3),
> .custom-select:nth-last-child(n + 3),
> .custom-file:nth-last-child(n + 3) .custom-file-label::after {
@include border-right-radius(0);
}
}
}
@ -175,8 +189,10 @@
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
@include border-right-radius(0);

4
site/docs/4.5/assets/scss/_component-examples.scss
View File

@ -333,10 +333,6 @@
}
}
.bd-example-forms-input-group-workaround .fix-rounded-right {
@include border-right-radius(.2rem !important);
}
//
// Code snippets
//

52
site/docs/4.5/components/forms.md
View File

@ -754,12 +754,6 @@ We are aware that currently the client-side custom validation styles and tooltip
{% endcapture %}
{% include callout.html content=callout type="warning" %}
{% capture callout %}
##### Input group validation
Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this workaround](#input-group-validation-workaround).
{% endcapture %}
{% include callout.html content=callout type="warning" %}
### How it works
Here's how form validation works with Bootstrap:
@ -1157,16 +1151,16 @@ $form-validation-states: map-merge(
}
{% endhighlight %}
### Input group validation workaround
### Input group validation
We're unable to resolve the broken `border-radius` of input groups with validation due to selector limitations, so manual overrides are required. When you're using a standard input group and don't customize the default border radius values, add `.rounded-right` to the elements with the broken `border-radius`.
To detect what elements need rounded corners inside an input group with validation, an input group requires an additional `.has-validation` class.
{% highlight html %}
<div class="input-group">
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control rounded-right" required>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
@ -1174,45 +1168,11 @@ We're unable to resolve the broken `border-radius` of input groups with validati
{% endhighlight %}
<div class="bd-example bd-example-forms-input-group-workaround">
<div class="input-group">
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control is-invalid rounded-right" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
When you are using a small or large input group or customizing the default `border-radius` values, add custom CSS to the element with the busted `border-radius`.
{% highlight css %}
/* Change values to match the radius of your form control */
.fix-rounded-right {
border-top-right-radius: .2rem !important;
border-bottom-right-radius: .2rem !important;
}
{% endhighlight %}
{% highlight html %}
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control fix-rounded-right" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
{% endhighlight %}
<div class="bd-example bd-example-forms-input-group-workaround">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control is-invalid fix-rounded-right" required>
<input type="text" class="form-control is-invalid" required>
<div class="invalid-feedback">
Please choose a username.
</div>