Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Select content and caret overlap
See original GitHub issueDescribe the bug In a Select component, the caret and the content sometimes overlap:
To Reproduce Steps to reproduce the behavior:
- Go to the official Flowbite React doc and scroll down to the “Select input” section:
- Open the dev tools
- Spot the
selectcontainer:
- Remove its classes (ie.
relative w-full)
Now the option and the caret overlap.
Expected behavior
The field should be large enough to fit the content and the caret without overlap:
System information:
- Device: PC
- Resolution: any
- OS: Windows
- Browser: Chrome
- Version: 108.0.5359.99
Project information:
- Tailwind: 3.0.0
- Flowbite: 1.4.7
- Flowbite React: 0.1.2
- Type: CRA
Issue Analytics
- State:
- Created 9 months ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Caret is displayed over the selected text · Issue #204 - GitHub
I had what I think is a similar issue (caret overlapping the text) and I resolved it by adding padding: .ui-select-match-text, ...
Read more >Overlapping form select when window is small - Stack Overflow
I have the following selection boxes that are working with select2 js: <!-- Selections for the table --> <div class="form-group row"> <div ...
Read more >dropdown caret overlaps with label text - PrimeFaces forum
The caret of the dropdown overlaps with the selected options label. This is an easy to solve issue by adding. Code: Select all...
Read more >Easily Select Overlapping AutoCAD Objects with ... - YouTube
Ever have trouble selecting the object you want verses the object AutoCAD thinks you want in busy areas of our drawing?
Read more >Fix Text Overlap with CSS white-space | SamanthaMing.com
Fix overlapping text by setting CSS white-space from. ... Sometimes when you create a "Learn more" or "Read more", you might append a...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
We are going to fix it from our side as well. So… I’ll keep this one open and track the flowbite one.
Thanks for the detailed report. This will be addressed on the main library too.