Material-ui: [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.

[prashaantt]

@dwoodlock Can you please share your FixedAppBar solution as a gist or something?

[c0b41]

@prashaantt checkout that comment https://github.com/callemall/material-ui/pull/1321#issuecomment-174108805

[dwoodlock]

            Hi Prashant,
            Here’s the gist for what I did.  It is no fancy, elegant, or generic.  But in short:

• I did not make any changes to the material-ui Toolbar component.
• I created a mainAppToolbar.js component for my app – that code is in the gist. There is a bunch of code in there that pertains to my app – so it’s not a generic component.
• In the styles (near the top), I made the toolbar ‘position: fixed’ at the top.
• In the render, I added a <div> right after the toolbar with a height the same as the toolbar. Because the toolbar is fixed position, it’s taken out of the flow, so this box also ‘appears’ at the top of the page underneath the toolbar. That means the next element (the first visible element) appears below the toolbar which is what I wanted.
• So the solution:

o Keeps the toolbar on the top of the page – because of fixed positioning.

o Has the content below the toolbar (because of the box) so it’s all visible and everything scrolls beneath the toolbar.

The only problem I haven’t solved with this is when you start the app on an iOS device when another app has taken some space on the top of the phone (like you are in a phone call), then the webview gets painted a little lower on the phone if the user starts your app. Then when you hang up the phone, it doesn’t properly move everything up. It’s not the most popular use case for me, but at some point I may figure out a fix.

Hope that helps.
Don

https://gist.github.com/dwoodlock/060546b94b1db6b7d723

From: Prashant Tiwari [mailto:[email protected]]
Sent: Thursday, February 18, 2016 2:07 AM
To: callemall/material-ui
Cc: Woodlock, Don (GE Healthcare)
Subject: Re: [material-ui] AppBar scrolls off the page (#1792)

@dwoodlockhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_dwoodlock&d=CwMCaQ&c=IV_clAzoPDE253xZdHuilRgztyh_RiV3wUrLrDQYWSI&r=bQuLCd7b2ehAXCAD1aeNrx49BkqReEHGd3hsO2qFScQ&m=55xK2oOD6q684JdvSZqRkIirdc5rzP-aLhhGWI1ciHA&s=74fp5T3RPTumJT2ZZLou5VvHBE2cMilq72Td9NEE6KY&e= Can you please share your FixedAppBar solution as a gist or something?

—
Reply to this email directly or view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_callemall_material-2Dui_issues_1792-23issuecomment-2D185588699&d=CwMCaQ&c=IV_clAzoPDE253xZdHuilRgztyh_RiV3wUrLrDQYWSI&r=bQuLCd7b2ehAXCAD1aeNrx49BkqReEHGd3hsO2qFScQ&m=55xK2oOD6q684JdvSZqRkIirdc5rzP-aLhhGWI1ciHA&s=M5V0i7VJh_pJjGGa20p_mIBC4YMIN6k6ibEwjeLxO1g&e=.

[tomRedox]

For info, the docs site for this material-ui project has a static app bar. The content and a left nav then start after the app bar, rather than underneath it. So, that code might provide some useful pointers - I've just worked through it and got a similar behaviour working in my project. The code for the docs site is here: https://github.com/callemall/material-ui/tree/master/docs.

[nadeemja]

This is still happening with the latest version as of now.

[mismith]

I would love to see some official docs describing the best way to implement this, seems like a pretty common behaviour to me, no?

[oliviertassinari]

@mismith Yes, it's. Notice that we are not focusing on the layout with this lib. We need a strong component base first, which we haven't completely yet 😁 .

[mismith]

Ahh, gotcha. Well can I help with this layout somehow? Is there anything out there already started for what your implementation is going to look like for layouts like this? I'd be happy to throw something together but I don't want to duplicate any existing work (in progress).

[oliviertassinari]

There is not work I'm aware of regarding the layouting. We are focusing on the core components. I don't that that we should work on this before the next branch is completed. Just to stay focused.

[jasan-s]

How is this issue being solved currently? I am also facing the the issue if i set the appbar position as fixed the children content renders underneath the appBar. Calculating the appbar height dynamically might solve the issue.

[oliviertassinari]

@jasan-s To put is simply, I know two ways to solve this issue:

1. With the positioning approach. You would have to add a position: fixed on the AppBar component
2. With the flex layouting approach. You would have to build a <ScrollView /> component like.

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

That works to the browser platform too.

(I'm using option 2.)

[amramadan]

Hey, guys for this issue are there any updates or a better fix ?

[ahmedhosny]

Any ideas on the best way to listen to changes in AppBar height? This way the dummy div marginTop can also be responsive.