diff options
| author | Martijn Cuppens <[email protected]> | 2020-10-22 10:42:05 +0200 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2020-10-26 15:23:25 -0700 |
| commit | 3e2c3298da1dba3385819b0a0e921077963e4ee2 (patch) | |
| tree | c902d2958ae4b13184a0a1584fcfce3af5989199 | |
| parent | eb91c2ec2a7598c02b9920c012611187039708fc (diff) | |
| download | bootstrap-3e2c3298da1dba3385819b0a0e921077963e4ee2.tar.xz bootstrap-3e2c3298da1dba3385819b0a0e921077963e4ee2.zip | |
Require `.has-validation` class to fix border radii on form elements
| -rw-r--r-- | scss/forms/_input-group.scss | 8 | ||||
| -rw-r--r-- | site/content/docs/5.0/forms/validation.md | 6 |
2 files changed, 9 insertions, 5 deletions
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 7a9a14dd7..065f8c611 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -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) { diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md index 65b865203..a3fa32689 100644 --- a/site/content/docs/5.0/forms/validation.md +++ b/site/content/docs/5.0/forms/validation.md @@ -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"> |