search

rob-balfre / svelte-select

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

svelte-select@beta (v5) in a dialog. wrong list placement #402

Closed ZerdoX-x closed 2 years ago

ZerdoX-x commented 2 years ago

To reproduce, add @beta or @5.0.0-beta.11 to svelte-select import. Then try to open list.

https://svelte.dev/repl/f956c30152894d538a82a82725da4992?version=3.48.0

So I guess this is the code: https://github.com/rob-balfre/svelte-select/blob/ce8f19683d07b8085755fb79bed2d6dfcf03c0e7/src/lib/List.svelte#L190-L217

hmnd commented 2 years ago

Experiencing this too when trying to use with carbon components.

hmnd commented 2 years ago

@ZerdoX-x I've found an interim fix that works for me with carbon. Just use the below CSS, and adjust the margins as needed:

.svelte-select + .list {
    position: absolute !important;
    top: unset !important;
    margin-top: 0.5rem;
    margin-left: 1rem;
    left: 0 !important;
}
ZerdoX-x commented 2 years ago

@ZerdoX-x I've found an interim fix that works for me with carbon. Just use the below CSS, and adjust the margins as needed

Yep.. Just hardcoded margins. Not a solution tho because I am building my own select component on base of svelte-select. Your "solution" could work only if you use svelte-select component once, in one place

ivanvanderbyl commented 2 years ago

I'm experiencing this same issue. When using this component inside a Headless UI Dialog it renders with these styles: position:fixed;left:570.1328125px;min-width:320px;width:auto;top:461.5px;, which places it a long way from the select control.

I suspect part of the problem is using it inside a portal, which might be screwing with the position calculations.

ZerdoX-x commented 2 years ago

I suspect part of the problem is using it inside a portal, which might be screwing with the position calculations.

Nope. Not related to portals at all. You can check my repro.

spencermize commented 2 years ago

@ZerdoX-x I've found an interim fix that works for me with carbon. Just use the below CSS, and adjust the margins as needed:

.svelte-select + .list {
  position: absolute !important;
  top: unset !important;
  margin-top: 0.5rem;
  margin-left: 1rem;
  left: 0 !important;
}

This works okay as a temporary fix; however, we still run into issues overflowing dialogs with overflow: hidden. I think this can be overcome using some of the techniques here: https://css-tricks.com/popping-hidden-overflow/. I don't recall this being an issue in v4, but it's possible I'm mis-remembering!

rob-balfre commented 2 years ago

beta v12 should fix this. If not, feel free to reopen. Thanks for reporting.