mdBottomSheet not positioned on the bottom the right way.

[tforbus]

I've created a bottomSheet, but its position is not correct.
Regardless of the content in the sheet, it goes lower than the bottom of the page, resulting in a scrollbar appearing.

This is the CSS for the sheet.

md-bottom-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 8px 16px 88px;
z-index: 70;
border-top: 1px solid;
-webkit-transform: translate3d(0,80px,0);
transform: translate3d(0,80px,0);
transition: all .4s cubic-bezier(0.25,.8,.25,1);
transition-property: -webkit-transform;
transition-property: transform;

Here is the markup for the sheet:

<md-bottom-sheet class='md-grid'>
</md-bottom-sheet>

I'm using 0.6.1

My workaround so far is just adding a lot of padding to the md-bottom-sheet to get the contents to appear.

[EladBezalel]

Can you please provide plunker or codepen so we can review the problem live?

[PaulMougel]

Here's a basic Plunker that you can fork, if that helps: http://plnkr.co/edit/G0CCmRfi9CHxCPkwkiND (don't forget to change the version of angular-material in the included files).

[mckenzielong]

Regardless of the content in the sheet, it goes lower than the bottom of the page, resulting in a scrollbar appearing.

Here is a plunker demonstrating this: http://embed.plnkr.co/PulmZ2gQSFN7THSLZnzS/preview

Looks like this is due to the css defaults. Padding on the bottom of the sheet is set to 80px, yet the box is positioned absolutely at the bottom. This results in 80px overhanging the bottom of the page.

From bottomSheet.scss:

$bottom-sheet-hidden-bottom-padding: 80px !default;
...
md-bottom-sheet {
   ...
   transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0);
   ...
}
...
&.ng-enter-active {
   ...
   transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0) !important;
}

Should $bottom-sheet-hidden-bottom-padding default to 0 instead of 80?

[rschmukler]

The additional padding is to allow the bottom sheet to be dragged up further than the length of the sheet. This gives it a satisfying wiggle on mobile when you're pulling the sheet up past it's height.

I was unable to recreate the issue using master... Please see if you can recreate here and open a new issue if necessary. Thanks!

[mckenzielong]

Regardless of the content in the sheet, it goes lower than the bottom of the page, resulting in a scrollbar appearing.

This still happens on non-mobile devices. You are able to scroll the page with the mouse scroll wheel. Touch controls, as you mentioned, have had this behavior changed / fixed. Plunk with scroll bar using updated sources here: http://plnkr.co/edit/JzUxerntOuzj9d7aF9gS?p=preview

@tforbus setting overflow:hidden on the body will get rid of scroll bar and the ability to scroll through the extra padding with the scroll wheel.

[mckenzielong]

@rschmukler page up/down and arrow keys will also demonstrate the same behavior as the scroll wheel.

Kind of related previous message in this sequence: it seems like the reason this doesn't happen in the docs is because the div (.demo-content) that contains the bottom sheet has overflow:hidden set.

[cadilhac]

What is the status of this ? I use a bottomsheet with RC3. The display is perfect under my iphone. But on a desktop browser it shows a vertical scrollbar because of the bottom padding...

[devversion]

@cadilhac The bottom padding is already reported. #7410

[Marco-Ishiguro]

md-bottom-sheet {
padding: 0px;
bottom: 80px;
overflow: hidden;
}

Should save the day, only tested on safari iPhone, chrome iPhone and chrome desktop but it should also work for the rest.

The value 80px need adjustment