Material: BottomSheet Does Not fix to Bottom -- scrolls page

[austinpe]

When I use the BottomSheet on a long, scrolling page, it does not appear at the bottom of the viewport.

If I am at the bottom of a page and open the BottomSheet, it will either appear half way up the screen or will scroll the page all the way top and open.

Here's a plunker of the issue:
http://plnkr.co/edit/Ee7r1rJF2a8fa3mSWmiL?p=preview

I fixed this by adding an empty div with the class/style of:
.bottom-bar { position: fixed; bottom: 0; height: 100%; width: 100% }

and then adding
parent: '.bottom-bar'
to $mdBottomSheet.show()

These fixes are commented out in the above plunker.

I have a feeling this is pretty bag practice and is just a hack to get it to work.

I did see this:

378 - fixing bottomSheet to position; no scrolling

where it says this was fixed, but it doesn't seem to actually be updated in the /src/components/bottomSheet/_bottomSheet.scss file.

Is this a bug? Or should I just use the hack I have in place? Or use the fix that was proposed in #378?

[mckenzielong]

This has to do with absolute positioning -- I thought I saw a similar issue open a while back, but it seems like it is related to dialogs, sidenav and toast (#1222)

That being said, if you place your content inside an md-content tag that has its parent set to the entire viewport height (similar to what is done for md-scroll-shrink) then the bottom sheet behaves as expected.

Here is a modified version of your plunk showing this: http://plnkr.co/edit/2E656kutOdmbryuqKGTO?p=preview

[austinpe]

@mckenzielong , thanks for the suggestion!

For my specific purposes, I think I'd rather not use md-content. However, I hadn't tried making md-content part of the body element, so I will toy around with that and see if maybe it'll work for my project.

I'd still be interested to see if there's another solution without using md-content, though.

Thanks again :)

[austinpe]

I was able to fix this without using the md-content by adding the inline style position: fixed to the <md-bottom-sheet> tag.

Thanks for the help @mckenzielong

[brettstack]

Related to #529?

[JobaDiniz]

@austinpe position: fixed worked, thanks.

EDIT:
Actually, almost worked... the sheet is now in the bottom, but the backdrop is totally wrong. What is the final fix for this?