diff --git a/src/components/fabSpeedDial/demoBasicUsage/index.html b/src/components/fabSpeedDial/demoBasicUsage/index.html
index 4d78006f67b..939bd91d5ae 100644
--- a/src/components/fabSpeedDial/demoBasicUsage/index.html
+++ b/src/components/fabSpeedDial/demoBasicUsage/index.html
@@ -43,10 +43,9 @@
Open/Closed
-
- Open
- Closed
-
+
+ Open
+
diff --git a/src/components/fabSpeedDial/fabController.js b/src/components/fabSpeedDial/fabController.js
index 01ab1b88ae9..967ca061c15 100644
--- a/src/components/fabSpeedDial/fabController.js
+++ b/src/components/fabSpeedDial/fabController.js
@@ -7,7 +7,7 @@
function FabController($scope, $element, $animate, $mdUtil, $mdConstant, $timeout) {
var vm = this;
- // NOTE: We use async evals below to avoid conflicts with any existing digest loops
+ // NOTE: We use async eval(s) below to avoid conflicts with any existing digest loops
vm.open = function() {
$scope.$evalAsync("vm.isOpen = true");
@@ -142,8 +142,12 @@
function enableKeyboard() {
$element.on('keydown', keyPressed);
- angular.element(document).on('click', checkForOutsideClick);
- angular.element(document).on('touchend', checkForOutsideClick);
+
+ // On the next tick, setup a check for outside clicks; we do this on the next tick to avoid
+ // clicks/touches that result in the isOpen attribute changing (e.g. a bound radio button)
+ $mdUtil.nextTick(function() {
+ angular.element(document).on('click touchend', checkForOutsideClick);
+ });
// TODO: On desktop, we should be able to reset the indexes so you cannot tab through, but
// this breaks accessibility, especially on mobile, since you have no arrow keys to press
@@ -152,8 +156,7 @@
function disableKeyboard() {
$element.off('keydown', keyPressed);
- angular.element(document).off('click', checkForOutsideClick);
- angular.element(document).off('touchend', checkForOutsideClick);
+ angular.element(document).off('click touchend', checkForOutsideClick);
}
function checkForOutsideClick(event) {
diff --git a/src/components/fabSpeedDial/fabSpeedDial.js b/src/components/fabSpeedDial/fabSpeedDial.js
index bd9c29b23cd..7f8f538becd 100644
--- a/src/components/fabSpeedDial/fabSpeedDial.js
+++ b/src/components/fabSpeedDial/fabSpeedDial.js
@@ -148,21 +148,27 @@
var newPosition, axis;
var styles = item.style;
+ // Make sure to account for differences in the dimensions of the trigger verses the items
+ // so that we can properly center everything; this helps hide the item's shadows behind
+ // the trigger.
+ var triggerItemHeightOffset = (triggerElement.clientHeight - item.clientHeight) / 2;
+ var triggerItemWidthOffset = (triggerElement.clientWidth - item.clientWidth) / 2;
+
switch (ctrl.direction) {
case 'up':
- newPosition = item.scrollHeight * (index + 1);
+ newPosition = (item.scrollHeight * (index + 1) + triggerItemHeightOffset);
axis = 'Y';
break;
case 'down':
- newPosition = -item.scrollHeight * (index + 1);
+ newPosition = -(item.scrollHeight * (index + 1) + triggerItemHeightOffset);
axis = 'Y';
break;
case 'left':
- newPosition = item.scrollWidth * (index + 1);
+ newPosition = (item.scrollWidth * (index + 1) + triggerItemWidthOffset);
axis = 'X';
break;
case 'right':
- newPosition = -item.scrollWidth * (index + 1);
+ newPosition = -(item.scrollWidth * (index + 1) + triggerItemWidthOffset);
axis = 'X';
break;
}