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

How can I make elements such as select menus, tooltip, etc. render in a specific DOM element? #11454

Closed
mririgoyen opened this issue May 17, 2018 · 5 comments
Closed

How can I make elements such as select menus, tooltip, etc. render in a specific DOM element? #11454

mririgoyen opened this issue May 17, 2018 · 5 comments
Assignees
@oliviertassinari
Labels
component: tooltip This is the name of the generic UI component, not the React module! new feature New feature or request

Comments

@mririgoyen
Copy link

The DOM elements for Tooltips, Selects, etc render in the body tag in the DOM. I need them scoped into another DOM element. How can I achieve this?

I was able to achieve this with Modals by specifying the container attribute and pointing to a ref, but this does not work for other elements. Additionally, wrapping things in a Portal does not do anything.

No dice:

        <Portal container={appContainer}>
            <Tooltip enterDelay={300} title='Zoom'>
              <Select
                className='zoom'
                onChange={changeZoomLevel}
                value={viewPort.zoom}
              >
                <MenuItem value={50}>50%</MenuItem>
                <MenuItem value={75}>75%</MenuItem>
                <MenuItem value={90}>90%</MenuItem>
                <MenuItem value={100}>100%</MenuItem>
                <MenuItem value={125}>125%</MenuItem>
                <MenuItem value={150}>150%</MenuItem>
                <MenuItem value={200}>200%</MenuItem>
              </Select>
            </Tooltip>
          </Portal>
@oliviertassinari oliviertassinari added new feature New feature or request component: tooltip This is the name of the generic UI component, not the React module! labels May 17, 2018
@oliviertassinari
Copy link
Member

@goyney We can add a PortalProps property to the tooltip, that could help.

@mririgoyen
Copy link
Author

@oliviertassinari What about with Select? That's the main problem I'm trying to solve.

We make a specific element fullscreen using Chrome's fullscreen API, but everything outside of that div isn't shown there. We aren't in a position to move the fullscreen element further up, so we need to bring all the component in.

@oliviertassinari
Copy link
Member

What about with Select?

The select is using the portal too. Select > Menu > Popover > Modal > Portal

@mririgoyen
Copy link
Author

mririgoyen commented May 17, 2018 •
edited
Loading

Could you give an example of how that might work?

Neither of these seem to work:

<Select PortalProps={{ container: appContainer }}>
<Select container={appContainer}>

appContainer is a ref object to the container I want the menu to appear in.

EDIT: MenuProps did it! Thank you!

Looking forward to the tooltip change.

@istarkov
Copy link
Contributor

istarkov commented Jun 3, 2018 •
edited
Loading

We have a similar issue with Tooltips,
the problem that we have tooltips on big scrollable horizontal table.
And if tooltip is outside the window it causes body scroll overflow.
So placing all the tooltips into div w=100% h=100% overflow=hidden will be enough for us.

For now we use react-helmet on such tables to set body overflow

<Helmet>
  <body style={'overflow: hidden;'} />
</Helmet>

I'm wondering is any other use cases exists to place tooltips into some parent div.

If not,
we could make default Popover Portal mounting node to be not a body node.

And allow somehow (via themes, id, classname etc) to style that node globally?

Also may be that must be default behaviour, as it was really hard to find what causes body overflow.

@oliviertassinari oliviertassinari self-assigned this Jun 22, 2018
@oliviertassinari oliviertassinari mentioned this issue Jul 8, 2018
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oliviertassinari oliviertassinari

Labels
component: tooltip This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mririgoyen @oliviertassinari @istarkov