Open omishah opened 1 month ago
With input groups, the border radius style is applied to the first and last children of the element with class="input-group"
.
In your case the border radius is not displayed correctly because the last child element is actually <datalist>
and not <input>
, changing the order of those two tags should solve the issue.
With input groups, the border radius style is applied to the first and last children of the element with
class="input-group"
.In your case the border radius is not displayed correctly because the last child element is actually
<datalist>
and not<input>
, changing the order of those two tags should solve the issue.
Yes, it makes sense i.e changing the order works. But, I guess it's worth mentioning in the official docs. Thanks.
I agree. I will create a PR to add it to the documentation.
Prerequisites
Describe the issue
Issue: Outer top-right and bottom-right border radius not applied to input (datalist) when used with the
input-group
class.Inshort:
border-top-right-radius
andborder-bottom-right-radius
properties are set to 0 instead of default value of--bs-border-radius
.Code:
Preview:
Reduced test cases
Fix:
When manually setting respective radius, it works fine:
Preview:
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.3.3