search

rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.26k stars 175 forks source link

Fix search input not filling entire select component, not centered #473

Closed hmnd closed 1 year ago

hmnd commented 1 year ago

Setting the width and height of the input to 100% seems to do the trick :)

rob-balfre commented 1 year ago

@hmnd got a REPL of what this is solving? Not sure I'm following the problem. Also the PR breaks multiple mode. Thanks

hmnd commented 1 year ago

@rob-balfre sorry, I've fixed the issue with multiple. I've made this REPL that should demonstrate the issue. Note how the placeholder in the original version is cut off, and if you type a long search keyword, it'll get cut off at the same spot.

This issue doesn't affect multiple mode because the input gets position: relative, but otherwise the input has position: absolute which causes it to shrink and lose vertical centering.

rob-balfre commented 1 year ago

I'm not seeing any issues with the original. Are you seeing something different?

Screen Shot 2022-09-17 at 2 26 42 pm

hmnd commented 1 year ago

@rob-balfre Huh, interesting... seems that Chromium's default behavior is 100% width, whereas Firefox limits the width

This is what I'm seeing on Firefox: image

rob-balfre commented 1 year ago

@hmnd yeah nice find, I wonder if that's how CSS should work or a Firefox bug!