Marcus Dacorréggio Marcus Dacorréggio - 1 month ago 17
Javascript Question

angular md-fab-toolbar follow scroll

I have a page with 3 cards, in one of these I have a md-fab-toolbar.

<md-card class="card-width">
<md-toolbar class="md-hue-2" layout-align="center start" layout-padding>
<span>{{cardName}}</span>
</md-toolbar>
<md-card-content>
<div>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
</div>
<md-fab-toolbar md-direction="left" class="md-fab-bottom-right">
<md-fab-trigger class="align-with-text">
<md-button aria-label="menu" class="md-fab md-primary">
<md-icon>menu</md-icon>
</md-button>
</md-fab-trigger>
<md-toolbar>
<md-fab-actions class="md-toolbar-tools">
<md-button aria-label="comment" class="md-icon-button">
<md-icon>magnify</md-icon>
</md-button>
<md-button aria-label="comment" class="md-icon-button">
<md-icon>magnify</md-icon>
</md-button>
<md-button aria-label="comment" class="md-icon-button">
<md-icon>magnify</md-icon>
</md-button>
<md-button aria-label="comment" class="md-icon-button">
<md-icon>magnify</md-icon>
</md-button>
<md-button aria-label="comment" class="md-icon-button">
<md-icon>magnify</md-icon>
</md-button>
</md-fab-actions>
</md-toolbar>
</md-fab-toolbar>
</md-card-content>
</md-card>


Check this codepen:
http://codepen.io/marcusdacoregio/pen/ZpdQwa

I want the md-fab-toolbar to follow the scroll and not to stay absolute position.
I can't get this behavior, do you guys can help me?

Answer

Is this what you want? - CodePen

Markup (relevant)

<md-content layout="column">
    <md-card class="card-width">
        <md-toolbar class="md-hue-2" layout-align="center start" layout-padding>
            <span>{{cardName}}</span>
        </md-toolbar>
        <md-card-content layout="column">
            <div id="myList">

CSS

#myList {
  overflow: auto;
}