Attempting to incorporate design examples from the angular material site, I am utilizing Angular Material 1.0.0RC5.
I am aiming to position the FAB Speedial within the Toolbar, similar to the example demonstrated on their site: https://material.angularjs.org/latest/demo/fabSpeedDial https://i.sstatic.net/e0vFC.png
However, upon applying the code I found on the page, I encountered a strange offset issue that I could only rectify with a margin-top:-23px. I suspect there might be a mistake in my implementation.
https://i.sstatic.net/773Mp.png
The offset problem is also visible in the codepen example from the site, indicating the same bug when exceeding a certain size https://i.sstatic.net/Um9oC.png
What am I doing wrong?
Below is the code snippet for reference
<body ng-app="starterApp" layout="column" ng-controller="AppController as ac" ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Toolbar with Icon Buttons</span>
</h2>
<span flex></span>
</div>
</md-toolbar>
<md-fab-speed-dial md-open="isOpen" md-direction="down" class="md-scale md-fab-top-right">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn">
<md-icon md-svg-src="menu"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="Twitter" class="md-fab md-raised md-mini">
<md-icon md-svg-src="android" aria-label="Twitter"></md-icon>
</md-button>
<md-button aria-label="Facebook" class="md-fab md-raised md-mini">
<md-icon md-svg-src="windows" aria-label="Facebook"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-4dp" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<md-button class="md-accent">Button 1</md-button>
<md-button class="md-accent">Button 2</md-button>
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.
<p>This is the content area! </p>
</md-content>
</div>
</div>