dropdown that looks like a heading
I'm trying to create a dropdown that looks like a heading with an underline underneath it. The underline (bottom border) should dynamically adjust its width to match the currently selected text, not the longest option in the dropdown. Here is what I've tried: 1). Setting width: auto - select element still sizes to longest option
2.) Using useRef and useEffect to measure text width with a temporary span element and setting inline style - didn't work
3). JavaScript approach to calculate text width using canvas measureText. Here is my codesandbox: https://codesandbox.io/p/sandbox/smln2r
2 Replies
https://codepen.io/chooking/pen/NPxzxvX
This is what I would do for now. In the future, you should be able to use appearance:base-select; and no JS or any other CSS would be needed to get the autofit working. It already works in new versions of Chrome but doesn't work in Firefox or Safari.
@Chooβππππ thank you so much!