Angular Material FAB Speed Dial has offset in Toolbar

0
votes

I tried to adpot some design examples from the angular material site . I use Angular Material 1.0.0RC5.

I want to place the FAB Speedial inside the Toolbar like in their example https://material.angularjs.org/latest/demo/fabSpeedDial enter image description here

But when I apply the code i see on the page i also got a strange offset which i can only correct with a margin-top:-23px but I assume i'm doing something wrong.

enter image description here

I can also see the offset in the codepen example from the site has the same bug if exceeding some size enter image description here

So what am I doing wrong?

Below I attach the code of the screen

<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>
2
htmlcssangularjsmaterial-designangular-material

2 Answers

1
votes

Take a look at this pen

All I've done is alter the margin-top property from 89 to 16 and all works ok now, if I understand what you mean

1
votes

The reason theirs works but yours doesn't is because theirs has another element above the menu bar, so they added "margin-top: 89px;" and "top: 16px;" to compensate.

All you need to do is adjust the margin-top value they have set.

.fabSpeedDialdemoMoreOptions md-fab-speed-dial {
  margin-top: 65px;
}

See here