CODEWITHSUNDEEP
angularjsangular-material
Diode Dan
Diode Dan

Reputation: 5151

FAB Toolbar - Won't open entire way

I am putting a FAB Toolbar component in the lower right of the screen. It hovers over the scrollable content (emulated here by the <div>). The behavior of hovering over the content is correct, and it appears to be correctly placed.

However, the toolbar does not expand to its full size. I tried putting the HTML into the <md-content>, but that causes the positioning to break. Is there something I'm missing here?

Thanks in advance!

//app.js
angular.module('BlankApp', ['ngMaterial'])
.controller('BasicDemoCtrl', function DemoCtrl() {
   
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>

<body ng-app="BlankApp" ng-controller="BasicDemoCtrl" layout="column" ng-cloak>   
    <!-- Page Window -->
    <md-content flex>
        <div style="position:absolute;left:48px;top:115px;width:1507px;height: 500px;"></div>
    </md-content>
     <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 class="md-icon-button" ng-click="reviewTable()">
                    <md-icon>launch</md-icon>
                </md-button>
                <md-button class="md-icon-button" ng-click="showActionToast()">
                    <md-icon>edit</md-icon>
                </md-button>
                <md-button class="md-icon-button">
                    <md-icon>arrow_back</md-icon>
                </md-button>
            </md-fab-actions>
        </md-toolbar>
    </md-fab-toolbar>
     
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
    <!-- Your application bootstrap  -->
    <script type="text/javascript" src="app.js"></script>
</body>

</html>

Upvotes: 2

Views: 279

Answers (2)

Diode Dan
Diode Dan

Reputation: 5151

It seems that the FAB Toolbar component is not fully matching the FAB button classes. I was able to get something close to what I wanted with the code below. Essentially, I used the class .md-is-open to move the FAB's open toolbar into the right position. This keeps the stylistic position of the FAB in place (.md-fab-bottom-right). It is not perfect, and the position changes abruptly on close.

//app.js
angular.module('BlankApp', ['ngMaterial'])
.controller('BasicDemoCtrl', function DemoCtrl() {
   
});
md-fab-toolbar { width: 100vw; }

md-fab-toolbar.md-is-open { right: 0 !important; bottom: 0 !important; }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>

<body ng-app="BlankApp" ng-controller="BasicDemoCtrl" layout="column" ng-cloak>   
    <!-- Page Window -->
    <md-content flex>
        <div style="position:absolute;left:48px;top:115px;width:1507px;height: 500px;"></div>
    </md-content>
     <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 class="md-icon-button" ng-click="reviewTable()">
                    <md-icon>launch</md-icon>
                </md-button>
                <md-button class="md-icon-button" ng-click="showActionToast()">
                    <md-icon>edit</md-icon>
                </md-button>
                <md-button class="md-icon-button">
                    <md-icon>arrow_back</md-icon>
                </md-button>
            </md-fab-actions>
        </md-toolbar>
    </md-fab-toolbar>
     
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
    <!-- Your application bootstrap  -->
    <script type="text/javascript" src="app.js"></script>
</body>

</html>

Upvotes: 1

bhantol
bhantol

Reputation: 9616

Use this CSS

.md-fab-toolbar.md-fab-bottom-right {
  width: 100vw;
}

Try running the following snippet- notice the <style>

//app.js
angular.module('BlankApp', ['ngMaterial'])
.controller('BasicDemoCtrl', function DemoCtrl() {
   
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <style>
   .md-fab-toolbar.md-fab-bottom-right {
      width: 100vw;
    }
   </style>
</head>

<body ng-app="BlankApp" ng-controller="BasicDemoCtrl" layout="column" ng-cloak>   
    <!-- Page Window -->
    <md-content flex>
        <div style="position:absolute;left:48px;top:115px;width:1507px;height: 500px;"></div>
    </md-content>
     <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 class="md-icon-button" ng-click="reviewTable()">
                    <md-icon>launch</md-icon>
                </md-button>
                <md-button class="md-icon-button" ng-click="showActionToast()">
                    <md-icon>edit</md-icon>
                </md-button>
                <md-button class="md-icon-button">
                    <md-icon>arrow_back</md-icon>
                </md-button>
            </md-fab-actions>
        </md-toolbar>
    </md-fab-toolbar>
     
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
    <!-- Your application bootstrap  -->
    <script type="text/javascript" src="app.js"></script>
</body>

</html>

Upvotes: 1

Related Questions