0
angle2mdlレイアウトを使用して上部に固定的なヘッダーを持つアプリを作成しました。 最近、より柔軟なカスタムヘッダーを作成するコードを書き直しました。Chrome拡張+ Angle-Cli：ビルド後のUIの問題
これ以降、アプリケーション（ng build）をビルドして展開されていない拡張機能としてインポートすると、コンテナ内のコンテンツはもうスクロールしなくなります。 それにもかかわらず、ビルドは「カジュアル」なブラウザウィンドウ、つまりアプリケーションがローカルサーバー上でホストされ、クロームで開かれているときに完璧に機能します。
何が問題なのですか？
Here is the angular-cli project. ng serveでテストできます。 その後、ng buildコマンドによって生成された結果（distフォルダ）をアンパック拡張としてロードします。フォルダにマニフェストを追加することを忘れないでください。
コード自体：
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app title!';
search = 'search';
}
app.component.html
<div class="header-wrap" mdl-shadow="2">
<div class="header-title">
<span class="header-title">{{title}}</span>
</div>
<div class="header-search-input">
<span class="header-search">{{search}}</span>
</div>
</div>
<div class="container">
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
<h6>test</h6>
<br><br>
</div>
index.htmlを
!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>Mosaic Chrome Extension</title>
<style>
body {
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
font-size: 100%;
height: 600px;
width: 800px;
min-width: 800px;
max-width: 800px;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
/*text-overflow: ellipsis;*/
/*overflow: hidden; */
width: 800px;
min-width: 800px;
max-width: 800px;
height: 600px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.deep_orange-indigo.min.css" />
<!-- charts -->
<app-root>Loading...</app-root>
</body>
</html>