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

Outer right border radius not applied to datalist in an input group #40763

Open
3 tasks done
omishah opened this issue Aug 22, 2024 · 3 comments · May be fixed by #40776
Open
3 tasks done

Outer right border radius not applied to datalist in an input group #40763

omishah opened this issue Aug 22, 2024 · 3 comments · May be fixed by #40776
Labels
docs

Comments

@omishah
Copy link

omishah commented Aug 22, 2024 •
edited
Loading

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 and border-bottom-right-radius properties are set to 0 instead of default value of --bs-border-radius.

Code:

<div class="input-group">
    <span class="input-group-text">#</span>

    <input list="datalistOptions" class="form-control datalist" placeholder="Choose or type an option">

    <datalist id="datalistOptions">
        <option value="abc">abc</option>
        <option value="...">...</option>
        <option value="xyz">xyz</option>
    </datalist>
</div>

Preview:

Screenshot 2024-08-22 at 21 31 44

Reduced test cases

Fix:

When manually setting respective radius, it works fine:

input.datalist {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

Preview:

Screenshot 2024-08-22 at 21 38 28

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
@TommasoAllegretti
Copy link
Contributor

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.

@omishah
Copy link
Author

omishah commented Aug 27, 2024

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.

@TommasoAllegretti
Copy link
Contributor

I agree. I will create a PR to add it to the documentation.

@TommasoAllegretti TommasoAllegretti linked a pull request Aug 27, 2024 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs
Projects
v5.3.4
Status: Ready to merge
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Docs: add Border radius section for Input group TommasoAllegretti/bootstrap
3 participants
@omishah @TommasoAllegretti @louismaximepiton