Material-ui: Keep AppBar in fixed position in fullScreen Dialog or page layout with transition

Created on 9 Jul 2018 · 4Comments · Source: mui-org/material-ui

I noticed that I can't keep the AppBar fixed at the top when trying launch it in a fullScreen Dialog or as a separate page with page contents in the context of a transition (e.g. Zoom).

[x] This is a v1.x issue (v0.x is no longer maintained).
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Expected AppBar to not scroll with page when setting position to fixed

Current Behavior

AppBar scrolls with page

Steps to Reproduce (for bugs)

https://codesandbox.io/s/2471jyxxkr (inside fullScreen dialog)
https://codesandbox.io/s/lrxv6w43y9 (inside <div> in page layout)

Context

I am trying to provide a fullscreen dialog box that can have a scrollbar, but I want the appBar to remain fixed

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.?.? |
| React | |
| browser | |
| etc | |

support

Source

ericpyle

Most helpful comment

This is not a support request. Using the documentation (setting AppBar position to fixed, which is the default so shouldn't be necessary anyway) does not solve this. Even adding "position: fixed" to root of AppBar does not solve this issue. There is no documentation on Material UI that defines how to set AppBar as fixed in full screen dialog

ajohnston1219 on 31 Oct 2018

👍3

All 4 comments

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.