Fab-toolbar 看起来不正确

Question

Fab-toolbar 在主要演示 here 中提供的示例中看起来不错。

但是，如果您尝试在自己的示例中使用它，它会变得比应有的高度更高，正如可以看到的那样 here。

<div ng-controller="AppCtrl" class="fabToolbardemoBasicUsage" ng-app="MyApp">
  <md-content class="md-padding">
    <p>
      You can use the fabToolbar with a trigger and regular toolbar.
    </p>

    <p>
      You may use the <code>md-open</code> attribute to programmatically
      control whether or not the control is open, and you may add a class
      of <code>md-left</code> or <code>md-right</code> to control the
      position of the trigger and toolbar tools.
    </p>
  </md-content>

  <md-fab-toolbar md-open="demo.isOpen" count="demo.count" ng-class="demo.selectedAlignment">
    <md-fab-trigger class="align-with-text">
      <md-button aria-label="menu" class="md-fab md-primary">
        <md-icon md-svg-src="img/icons/menu.svg"></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 md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
        </md-button>
        <md-button aria-label="label" class="md-icon-button">
          <md-icon md-svg-src="img/icons/ic_label_24px.svg"></md-icon>
        </md-button>
        <md-button aria-label="photo" class="md-icon-button">
          <md-icon md-svg-src="img/icons/ic_photo_24px.svg"></md-icon>
        </md-button>
      </md-fab-actions>
    </md-toolbar>
  </md-fab-toolbar>

  <md-content class="md-padding" layout="column">
    <div layout="row" layout-align="space-around">
      <div layout="column">
        <b>Open/Closed</b>

        <md-radio-group ng-model="demo.isOpen">
          <md-radio-button ng-value="true">Open</md-radio-button>
          <md-radio-button ng-value="false">Closed</md-radio-button>
        </md-radio-group>
      </div>

      <div layout="column">
        <b>Alignment</b>

        <md-radio-group ng-model="demo.selectedAlignment">
          <md-radio-button ng-value="'md-left'">Left</md-radio-button>
          <md-radio-button ng-value="'md-right'">Right</md-radio-button>
        </md-radio-group>
      </div>
    </div>
  </md-content>
</div>


.fabToolbardemoBasicUsage md-fab-toolbar.md-left md-fab-trigger.align-with-text {
  left: 7px; }


(function() {
  'use strict';

  angular.module('MyApp')
    .controller('AppCtrl', function($scope) {
      $scope.isOpen = false;

      $scope.demo = {
        isOpen: false,
        count: 0,
        selectedAlignment: 'md-left'
      };
    });
})();

如何解决这个问题并使工具栏具有正常高度？

Answer 1

您可以像这样将默认的硬编码 height:6.8 rem 值更改为 height:100% :-

md-fab-toolbar .md-fab-toolbar-wrapper {
    height: 100%;
}

Fab-toolbar 看起来不正确

Fab-toolbar does not look right

javascript

angularjs

angular-material