Question

我有一个网页，我使用Angular材料设计的md工具栏，但我有一些格式问题。这是基本代码：

<md-toolbar style="position: fixed;">
<div class="md-toolbar-tools md-whiteframe-z1">

    <md-button class="md-icon-button" aria-label="Top Toolbar" hide-gt-sm ng-click="vm.toggleSideNav()">
        <ng-md-icon icon="menu"></ng-md-icon>
    </md-button>
    <h2>
        <span>Top Toolbar</span>
    </h2>
    <span flex></span>
    <md-button class="md-raised" ng-click="vm.logout()" aria-label="Logout" show-gt-sm>
        Logout
    </md-button>
</div>

我遇到的问题是，如果我从md工具栏中删除style="position: fixed;"，工具栏只会占据屏幕宽度的一小部分。当我添加位置：固定它占据屏幕的整个宽度，但是注销按钮不显示。它就像被推出屏幕一样。我还没有弄清楚我如何能够显示注销按钮并让工具栏在整个页面上延伸。

这是工具栏的父级（减去所有脚本包含等）：

<!DOCTYPE html>
<html lang="en" ng-app="otpAdminApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

    <style type="text/css">
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
    </style>
</head>
<body ng-controller="mainController as vm" ng-cloak>

    <div ng-view flex></div>

</body>
</html>

Answer 1

我猜问题在于工具栏的父级。

<body ng-controller="mainController as vm" ng-cloak>

<div ng-view flex></div>

</body>

您正在使用div元素和flex，在这种情况下，div只会占用其子元素所需的空间。例。您可以使用background-color css属性自行检查。 http://codepen.io/next1/pen/aNgGZa

因此您必须根据需要将layout-fill与div或md-content一起使用。这是工作示例。 http://codepen.io/next1/pen/EKBLyp

<md-content layout="column" layout-fill style="background-color:pink"> // in parent controller as per your code
<md-toolbar>
  <div class="md-toolbar-tools md-whiteframe-z1">

    <md-button class="md-icon-button" aria-label="Top Toolbar" hide-gt-sm ng-click="vm.toggleSideNav()">
      <ng-md-icon icon="menu"></ng-md-icon>
    </md-button>
    <h2>
    <span>BankID OTP Administration</span></h2>
    <span flex></span>
    <md-button class="md-raised" ng-click="click = 'click'" aria-label="Logout" show-gt-sm>
      Logou
    </md-button>
  </div>
</md-toolbar>
<div flex>
  Text
</div>
</md-content>

Answer 2

如果不查看代码，就无法给出一个好的答案。可以请你创建一个plunkr。？作为快速修复，您可以添加style =“width：100vw”替换position：fixed（由于旧浏览器中的支持问题，这不是一个很好的选择）。如果你可以创建一个plunkr，我将能够帮助你。

角度材料设计工具栏 - 格式化问题

2 个答案: