Select position

[peyronoscar]

Hi!

I have a cart component which animates its horizontal position when opened. Inside the cart I use the Select component from Radix but are having problem with its positioning when opened. The fixed position of the select seems to be calculated from the initial position of the cart and is therefor hidden when the cart slides in.

Is there any way to re-calculate the position of a component for each opening?

[benoitgrelard]

Hey @peyronoscar,

Could you create a minimal reproduction in a codesandbox for us to take a look at?
You can use this a a starter: https://www.radix-ui.com/docs/primitives/components/select by clicking on the codesandbox logo in the bottom right corner.

[peyronoscar]

Hi @benoitgrelard!

Thanks for your for your time!

I think this demo: https://codesandbox.io/s/quiet-fire-5den5x will illustrate the problem quite well. Removing the animation by setting initial={{ x: 0 }} will showcase the result I'm looking for regarding the select.

Please let me know if you need anymore information.

[benoitgrelard]

I think it's the transform that's creating an issue with positioning, not really anything to do with the animation really. If you had a div with position fixed and some transform (even 0) it looks like it's out of place for some reason.

That being said, I see you are not using Select.Portal which definitely would fix the issue as it takes it out of the flow.
So if you just forgot it for whatever reason, that's your solution.

[peyronoscar]

Sorry to bother you again @benoitgrelard, but I realised that the problem with the Portal-solution is that the z-index of the cart messes up the layout. If you have time, I would greatly appreciate if you took a look at the updated version.