我有一个网页,在其中使用Angular材质设计的md-toolbar,但存在一些格式问题。这是基本代码:
<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-toolbar中删除
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>
最佳答案
我猜问题出在工具栏的父级。
<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>