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 portal to a specific target #99

Closed
fabarea opened this issue Sep 19, 2016 · 4 comments
Closed

Render portal to a specific target #99

fabarea opened this issue Sep 19, 2016 · 4 comments
Labels
enhancement

Comments

@fabarea
Copy link

fabarea commented Sep 19, 2016 •
edited
Loading

Would it be feasible to specify a target, like an "id" attribute, so that the portal is rendered into this container instead of the bottom of the body? The feature was somehow mentioned here and I would need that.

Thanks for all your work!

Update: actually my use case is to render / open the portal outside the React Scope. Is it actually possible? I am in a mixed context of React / traditional app (!= single page app).

<body>
  <div id="my-react-app">
    ... my react app comes here...
  </div>
  <footer>
    <div id="my-portal">
      ... desired portal here, given id="my-portal"...
    </div>
  </footer>
</body>

Don't know if it is possible / in the scope of react-portal.
@th3fallen
Copy link

👍 this would be awesome if possible

@royteusink royteusink mentioned this issue Sep 29, 2016
Closed
@jussch
Copy link

jussch commented Nov 22, 2016

I second this as well, my use case is a touch different though.

My HTML looks like this:

<html>
<head></head>
<body>
  <div id="content">...</div>
</body>

And my CSS looks somthing like this:

html, body, #content {
  height: 100%;
}

#content {
  overflow: auto;
}

This makes it so that #content is the div that controls scrolling on the page, and not body. So when portals get appended to the body, they are outside of the user's scroll. This can also push the whole body down which adds an additional scrollbar along side the #content div.

Being able to pass #content as a render target for react-portal would really help for this case. Even being able to pass an element directly like <Portal renderTarget={document.getElementById('content')}/> would be even better. (So the element can be passed down through context or props if necessary.)

@robinfehr
Copy link

+1

@tajo
Copy link
Owner

tajo commented Dec 29, 2016

#100 should be merged soon and released as v4

@tajo tajo closed this as completed Dec 29, 2016
@Hypnosphi Hypnosphi mentioned this issue Apr 8, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@th3fallen @fabarea @tajo @robinfehr @jussch