Custom React component - fix popover overlay

Custom Components
1

I have managed to implement the TypeScript version of Mui’s App Bar (App Bar React component - Material UI) and integrate it into Streamlit by declaring it as a custom component.

The problem is that the ‘account menu’ popover bugs out. This is because the iframe’s height is too low to accomodate the height of the popover, so only a small portion of the popover is shown when I click on it.
image

If I make the iframe’s height bigger, it works fine but then all other components get pushed down:

image
image2390×544 19.7 KB

Is there any way to “spill” this popover without making the iframe bigger, thus pushing all other Streamlit components down?

1 Like
2

Any update on this?

3

I’m not sure if this solution works, but it works in other components. You can try setting the iframe style z-index of the App Bar to 100 or higher, so that the pop-up dialog box is higher than the streamlit itself. I hope it will be useful to you.