Using full screen in Material UI components

[haziqali-2019]

HI, I am using material ui. There seems to be some issue with material ui select options such that the options do not show on full screen maybe because the options are rendered outside the container element in the dom. I know this is something related to material ui and not this library but I was wondering if anyone faced this issue and was able to resolve it?

[pomle]

@haziqali-2019 can you share your implementation?

[thalysonalexr]

i have a same problem :(

[pomle]

@thalysonalexr, please share your solution so someone can help you figure out why the problem exists.

[abayo-luc]

Change container prop of your popover to point to your full-screen component.
<Menu container={() => document.getElementById('fullscreen-node')}> ....</Menu>

It will append your popover inside your full screen node, instead of the default document.body

[pomle]

@haziqali-2019, @thalysonalexr take a look at @abayo-luc. I think they got it.

Had a similar problem with overflow: hidden and Material UI.

[Vasyl-Hnatyshyn]

document.getElementById('fullscreen-node')}> .... Hi, I need to do the same but with the Select component and it doesn't support 'container'

[ferceballos]

<Menu container={() => document.getElementById('fullscreen-node')}> ....</Menu>
It will append your popover inside your full screen node, instead of the default document.body

This seems to work just fine, but I have a bunch of these "popover" Material components in my project.

Is there any way to implement this change in all of the components at once instead of doing it one by one?

[pomle]

@ferceballos, you probably have to update everywhere you use your menu but you could create your own Menu wrapper so you don't have to repeat this code. Not sure that is what you need.

const MyMenu = ({children}) => {
  return (
    <Menu container={() => document.getElementById('fullscreen-node')}>
      {children}
    </Menu>
  );
}

[pomle]

This seems to be a known issue with Material UI.
The issue is pinned.
Closing.

[AntonOfTheWoods]

@Vasyl-Hnatyshyn , did you find a way to get this to work? Or is that what @pomle means that this is a "known issue"? I couldn't find any other mention of this anywhere else.

[AntonOfTheWoods]

If anyone else comes here looking for this, then <Select MenuProps={{ container: ref?.current }} ... /> seems to be one way to achieve this.