[AppBar] Scrolls off the page

[dwoodlock]

Hi there,
According to your description of AppBar: "App bars are a collection of components placed as a static header for an application", I was thinking that the AppBar wouldn't scroll off the page when you put a long list below it, let's say. But it does. See this example if you'd like: http://www.donwoodlock.com/TextDon/index.html

Is there a property I should set to keep it fixed on top? Or a particular wrapper I should use for everything else to create a designated scrolling area?

Please advise. Thx.
Don

[quadrupleslap]

This, and for tabs too.

[shaurya947]

@dwoodlock although that should not have happened, before we look into it, one possible workaround might be to put style={{position: 'fixed'}} as an attribute to your AppBar component.

Let me know how that works!

[dwoodlock]

That works a little bit. When you do a fixed position element as you know, the browser doesn't leave room for it. So since I have:


the first item on the my list is hidden under the AppBar. I'm sure I can do something that I'd rather not do like query the DOM to figure out the height of that AppBar and put a box underneath it to accommodate. Let me know if you think that might be best - otherwise I'll await your investigation on this.
Don

[shaurya947]

@dwoodlock I think that's what you might have to do. You could apply the position: 'fixed' style conditionally (only when you have scrolled past the appbar) like so: http://www.hongkiat.com/blog/css-sticky-position/

I'll leave this to @oliviertassinari and @hai-cea if they have a better suggestion.

[oliviertassinari]

I'm using the approach you describe: a position fixed and a paddingTop. Works fine for me. I can't find a better one.

[dwoodlock]

Thanks. I'll either do the sticky positioning techniques from your article or the fixed positioning with the paddingTop like Olivier suggests. @oliviertassinari - I'm assuming what you are doing is checking the height of the AppBar after it has been mounted and then adding paddingTop of that height to the component right below it? I was hoping not to query the DOM but that's my interpretation of that solution - is that correct?

[oliviertassinari]

@dwoodlock I'm not computing the height of the AppBar. I'm using a static value. So It was simpler for me to just use fixed position.
If the height of your AppBar change. I suggest you you to try flex box. It should be working (this is what I should be doing too).

[dwoodlock]

OK - I have enough to go on and build a workaround. Ideally it would be great if someone more talented than me could change AppBar to actually match this description: "App bars are a collection of components placed as a static header for an application" and not have it scroll off the page. I'm not sure I could make that change reliably to this library. But I appreciate everyone's tips: I ended up writing a FixedAppBar component that renders an AppBar in a fixed div and renders a box underneath it with the same height as the AppBar. That worked for me.

[shaurya947]

Haha I hear you @dwoodlock! I'm re-writing AppBar these days, and I'll see if I can include some logic to accomplish that. Feel free to close this issue if your problem has been solved :-)

[shaurya947]

@dwoodlock @oliviertassinari this is a good package: https://www.npmjs.com/package/react-sticky

I'll probably end up using this in the AppBar code too.

[oliviertassinari]

I think that react-sticky doesn't resolve the content overflow issue.
The question is, do we want MUI to have layout? If no, than having component as AppBar that just render correctly in his available space sounds fine to me.

[dwoodlock]

@oliviertassinari I'm fine either way. I was just thinking based on the documentation that the AppBar would stay at the top and not scroll. But like I said I was able to write a FixedAppBar component that does that by leveraging the real AppBar, making it fixed position, and drawing a box of the same height next (basically underneath it) so my FixedAppBar would take up space in the flow.