角度材料設計工具欄 - 格式問題

我有一個網頁，我使用的是從角度材料設計的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>

來源

2016-05-20 user16655

'md-toolbar'的父母是否有全寬？ –

查看我的編輯，我添加了工具欄的父項。據我瞭解它有全寬。 – user16655

您是否嘗試過將'flex'添加到您的'md-toolbar'？您可能必須首先在您的ng-view元素中添加'layout =「列」'。 –

我想問題在於工具欄的父級。

<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>

來源

2016-05-20 10:16:16 nextt1

不能給你一個很好的答案，而無需看看你的代碼。你可以請創建一個plunkr。？作爲一個快速修復，您可以添加style =「width：100vw」替換position：fixed（由於舊版瀏覽器中的支持問題，這不是一個好選擇）。如果你可以創建一個plunkr，我將能夠幫助你。

來源

2016-05-20 08:22:47

角度材料設計工具欄 - 格式問題

回答

相關問題