Floating Action Button not scrolling

Question

I have a FAB contained in two div tags from parent (app.component.html) where one of them uses transform: translate3d.
When scrolling down the page, the FAB is 'stuck' and doesn't scroll.

I want this FAB to overlay this entire HTML page (specifically: <div class="page-content">)
HTML:

  <div cdk-scrollable="" class="mat-sidenav-content" ng-reflect-ng-style="    " style="margin-left: 0px; margin-right: 0px; transform:     translate3d(0px, 0px, 0px);">
      <div class="page-container">
        <router-outlet></router-outlet>
    <app-carbuilder _nghost-wxw-148="">
            <button style="position: absolute;bottom: 16px;right: 16px;z-index: 5" data-toggle="collapse" data-target="#demo"  aria-expanded="false" aria-controls="demo" md-fab>
            <md-icon>
              directions_car
            </md-icon>
          </button>
        <div class="page-content">
            <p>content</p>
    </div>

(Native image upload didn't work)
Here's how it looks before & after scroll:

Before
After

Note:
Similar but not duplicate
Related
Also Related

have you tried setting the yellow car's position to fixed so it follows the flow of the page when you scroll? https://www.w3schools.com/cssref/pr_class_position.asp, cannot really guide you more since you are posting like 2% of your code:) — Furious Mountain, Mar 02 '17 at 20:04

score 1 · Answer 1 · answered Apr 27 '17 at 13:14

1

They use CSS transform on .mat-sidenav-content.
CSS transform creates a new local coordinate system.

Fix to remove transform:

.mat-sidenav-content {
    transform: none !important;
}

Though it resets their intention to force hardware acceleration.

answered Apr 27 '17 at 13:14

Alexi

11
1

since they're using CSS transform to create a new local coordinate system, wouldn't it be counter-intuitive to go against the wave? Instead, is there a way to work with the transform correctly? – Moshe May 04 '17 at 15:52

score 0 · Accepted Answer · answered Mar 06 '17 at 19:38

In case anyone is caught up with this problem, there is no solution. Google's Material theme has addressed the issue here:

FABs inside sidenav

For a sidenav with a FAB (or other floating element), the recommended approach is to place the FAB outside of the scrollable region and absolutely position it.

In other words:
1. Place the Fab in your "app.component.html" (or parent component's HTML)
2. use *ngIF to determine if the current route (or component) is active, if true -> display the FAB.

Floating Action Button not scrolling

2 Answers2