md-overlay-md-menuのコンテナが角度2のアラインメントがずれています

Question

アングル2の素材を使用してアプリケーションを作成していますが、md-sidenav-layoutセクションに素材メニューを追加しようとしています。しかし、メニューのトリガーには、ページの別のセクションに表示されます。

app.component.ts-

@Component({ 
     selector: 'app-root', 
     template: ` 
     <navbar></navbar> 
     <sidenav #tests></sidenav> 
     ` 
    }) 

sidenav.component.ts- sidenavコンポーネントをブートストラップされ、私の主成分。私はhttps://github.com/angular/material2/blob/master/src/lib/menu/README.mdを参照してメニューを作成しています。ページ

@Component({ 
     selector: 'sidenav', 
     template: ` 
      <md-sidenav-layout> 
       <md-sidenav #start [opened]="sidenavStatus()" (close)="reset()"> 
        <md-card> 
         <p class="profile-name">Username</p> 
        </md-card> 

        <md-list class="sidenav-list"> 
         <md-list-item> Add Steps </md-list-item> 
         <md-list-item> Add Sections </md-list-item> 
         <md-list-item> Add Fields </md-list-item> 
        </md-list> 
        <br>    
       </md-sidenav> 

       //the actual content in the page 
       <md-menu #menu="mdMenu"> 
        <button md-menu-item> Refresh </button> 
        <button md-menu-item> Settings </button> 
        <button md-menu-item> Help </button> 
        <button md-menu-item disabled> Sign Out </button> 
       </md-menu> 
       <md-card class="step-card"> 
        <md-card-title>Card with title 
         <md-icon>more_vert</md-icon> 
         //button which is used to trigger the menu 
         <button md-icon-button [md-menu-trigger-for]="menu"> 
          <md-icon>more_vert</md-icon> 
         </button>      
        </md-card-title> 
        <md-card-content> 
          <p>This is supporting text.</p> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p> 
        </md-card-content> 
       </md-card>   
      </md-sidenav-layout> 
     `, 
     styleUrls: ['./app/sidenav/sidenav.component.css'] 
    }) 

そのメニューの実際の位置をオフセットされた変換CSSプロパティとAPP-ルート（主成分）の外側に新しいDIVを作成するレンダリング。

はDOMレンダリング：

レンダリングUI：

私は何をしないのですか？私がsidenavの外にあるはずの実際のコンテンツを追加しようとすると、sidenavがどこで終了するのかが分かります。

Answer 1

コンテンツまたはアプリケーション領域の下に表示されるダイアログやメニューの問題を解決するには、角度の材料プレビルドテーマをインポートするか、独自のテーマを作成してください。

構築済みテーマ名

• ディープ・パープル・amber.scss
• インジゴpink.scss
• ピンク-bluegrey.scss
• 紫green.scss

あなたの場合お尻を使用しています

import ‘~@angular/material/core/theming/prebuilt/[name-of-the-themes].scss'; 

は、これはあなたが

はSASSやSCSSファイル

@import '~@angular/material/core/theming/all-theme'; 
// Plus imports for other components in your app. 

// Include the base styles for Angular Material core. We include this here so that you only 
// have to load a single css file for Angular Material in your app. 
@include mat-core(); 

// Define the palettes for your theme using the Material Design palettes available in palette.scss 
// (imported above). For each palette, you can optionally specify a default, lighter, and darker 
// hue. 
$candy-app-primary: mat-palette($mat-indigo); 
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400); 

// The warn palette is optional (defaults to red). 
$candy-app-warn: mat-palette($mat-red); 

// Create the theme object (a Sass map containing all of the palettes). 
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 

// Include theme styles for core and each component used in your app. 
// Alternatively, you can import and @include the theme mixins for each component 
// that you are using. 
@include angular-material-theme($candy-app-theme); 

を作成したテーマを作成し、

例のテーマは、角マテリアルのドキュメントから取られたあなたのstyles.scssファイルに含める方法ですhttps://material.angular.io/guide/theming

似たような質問Angular Material2 md-select dropdown appears at bottom of the page