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

Require .has-validation class to fix border radii on form elements

Browse Source
This commit is contained in:
Martijn Cuppens 2020-10-22 10:42:05 +02:00 committed by Mark Otto
parent eb91c2ec2a
commit 3e2c3298da
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -128,9 +128,11 @@
// stylelint-disable-next-line no-duplicate-selectors
.input-group {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
@include border-right-radius(0);
&:not(.has-validation) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
@include border-right-radius(0);
}
}
> :not(:first-child):not(.dropdown-menu) {

6
site/content/docs/5.0/forms/validation.md
View File

@ -165,6 +165,8 @@ We recommend using client-side validation, but in case you require server-side v
For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
To fix [issues with border radii](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.
{{< example >}}
<form class="row g-3">
<div class="col-md-4">
@ -183,7 +185,7 @@ For invalid fields, ensure that the invalid feedback/error message is associated
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group">
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
@ -314,7 +316,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltipUsername" class="form-label">Username</label>
<div class="input-group">
<div class="input-group has-validation">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">