Floating Action Button in md-sidenav?

[smitty02001]

Hi All,

I am using a md-sidenav that scrolls because it's content overflows and the overflow is automatic from md-sidenav. I need a to use a floating action button within the md-sidenav. It seems like there is no such component so I am using a md-button where its position is fixed to the bottom of the md-sidenav, however the buttons position moves with the scroll of the md-sidenav. I read about this component #1416 whjch might work for me but it has not been implemented.

Any suggestions or a workaround?

Thanks for the help.

[marcysutton]

Where are you trying to position the FAB, is it overlapping one of the edges or fully contained? I started going down the overlapping path at one point, but then I thought it was a bad design pattern because: what happens to the FAB when the sidenav is closed? Does it get hidden, even though it overlaps?

[smitty02001]

Thanks for the reply!

I am using FAB and it is fully contained in the md-sidenav and positioned 5% from the bottom, right. The sidenav contains a list of data and the FAB button performs an action on that data. So when the sidenav is closed and the button hidden as it only pertains to the data in the sidenav. The problem is when the data in the list is long the sidenav will overflow and display a scroll bar but when I scroll the bar the fab button scrolls with the sidenav and if it scrolls to far eventually the button will not be visible. I am expecting it to stay fixed at the position of 5% to bottom right within the sidenav regardless if I am scrolling or not.

[marcysutton]

Ok. If you have a Codepen or Plunker with what you've got so far, that will help us debug.

[ThomasBurleson]

No response.

[hamdipro]

is there a solution for this issue please ?

[topherfangio]

Checkout this demo for a solution: http://codepen.io/topherfangio/pen/yNWBWy?editors=110

Toggle the right sidenav open and you will see the scrollable content and the floating action button. This just required a small bit of CSS on the <md-content> to achieve.

[hamdipro]

Thanks @topherfangio it works 👍