Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Render to "other" container & use Tether to position overlays #697

Closed
Andreyco opened this issue Jan 6, 2016 · 6 comments
Closed

Render to "other" container & use Tether to position overlays #697

Andreyco opened this issue Jan 6, 2016 · 6 comments

Comments

@Andreyco
Copy link

Andreyco commented Jan 6, 2016

I am not using screenshot of react-select in action, but they do apply to react-select as well

In some scenarios you have to use overflow: hidden. This causes undesired side effects such as cropping list of options. See this picture...

This can be solved by attaching select's overlay to outer element, document.body preferably.
Tether does this job very well. Bootstrap 4 is moving to Tether as well.
https://github.com/HubSpot/tether

Would you consider use of Tether to display overlays?

Edit
It's was not clearly stated. Tether does not render elements to "other" tree. It just positions those elements to their targets. Rendering should happen via "portals".
@jamiebuilds
Copy link

I doubt that tether will work with this, but just to note if you want to make this type of rendering work universally (isomorphically) you can use https://github.com/cloudflare/react-gateway

@Andreyco
Copy link
Author

Andreyco commented Jan 7, 2016

Yes, you need to render element via "portals" to target container. Then, with Tether positions those elements next to their targets on scrolling, window resize, ...

@jsdf
Copy link

jsdf commented Jan 8, 2016

A more extensible option here would be to add a prop like renderMenu which would allow developers using react-select to implement the actual rendering of the menu, eg. via a portal. They could use Tether if they wish, or implement their own rendering logic. This would also allow stacking context problems to be solved by implementing renderMenu to render the dropdown at the end of <body>, as eg. Select2 does.

@Andreyco
Copy link
Author

Andreyco commented Jan 8, 2016

Oh yes, this is an excellent option too!

@jsdf
Copy link

jsdf commented Jan 10, 2016

#529 would allow this, though I am not sure it is the best approach, as I've mentioned on the PR.

@Andreyco Andreyco changed the title Use Tether to display overlays Render to "other" container & use Tether to position overlays Jan 10, 2016
@Craga89 Craga89 mentioned this issue Feb 8, 2016
Closed
@TrevorBurnham TrevorBurnham mentioned this issue Feb 19, 2016
Merged
@FezVrasta FezVrasta mentioned this issue Apr 22, 2017
Closed
@a-type a-type mentioned this issue Feb 23, 2018
Closed
@jossmac
Copy link
Collaborator

jossmac commented Mar 17, 2020

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

  1. v1 to v2 upgrade guide
  2. v1 documentation and examples

@jossmac jossmac closed this as completed Mar 17, 2020
@cssecautomation cssecautomation mentioned this issue Feb 2, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Andreyco @jamiebuilds @jsdf @jossmac