Question

我正在运行AngularJS（角度版本1.4.3）应用程序，并且我尝试在同一页面上使用两个Angular Material元素：Tabs和Bottom Sheet。

当我单独使用它们时，两者都按预期工作。但是，当我同时在页面上放置这两个元素时，底部工作表的垂直位置会与选项卡的动态高度混淆，如jsFiddle所示（切换到选项卡＆＃ 34;两个＆＃34;并点击＆＃34;帮助！＆＃34;按钮查看问题）。两者都安装了凉亭，并带有打包的.css文件。

这是我的控制器和视图：

angular.module('tabsDemo2', ['ngMaterial']).controller('mainCtrl', function($scope, $mdBottomSheet) {
  $scope.showListBottomSheet = function($event) {
        $scope.alert = '';
        $mdBottomSheet.show({
          templateUrl: 'help-panel.html',
          targetEvent: $event
        }).then(function(clickedItem) {
          $scope.alert = clickedItem.name + ' clicked!';
        });
      };  
});

和

<body ng-app="tabsDemo2">
<div ng-controller="mainCtrl">
  <md-content class="md-padding">
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
          <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>

<div class="">
    <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center">
    <md-button flex="30" class="md-primary md-raised" ng-click="showListBottomSheet($event)">Help!</md-button>
</div>

</div>

<script type="text/ng-template" id="help-panel.html"><md-bottom-sheet class="md-list md-has-header">
  <md-subheader>Comment Actions</md-subheader>
  This is where help panel content goes.
    </md-bottom-sheet>
</script>

</body>

我怀疑它与Tabs如何处理滚动以及Bottom Sheet如何处理其位置有关。我在Angular Material github上找到this issue，但是当Tabs和Bottom Sheet都存在时，那里的修复似乎没有帮助。

有什么想法？

角度材料标签和底部垂直问题

0 个答案: