I wrote an app with a sticky header on the top using angular2 mdl layouts. Recently I rewrote the code to get a more flexible custom header.
Since then, when I build the app (ng build) and import it as an unpacked extension, the content in my container doesn't scroll anymore. Nonetheless, the build works flawlessly in a 'casual' browser window, i.e when the app is hosted on a local server and opened in chrome.
What could be the problem ?
Here is the angular-cli project. You can test it with ng serve. Then load the result (dist folder) produced by the ng build command as an unpacked extension. Don't forget to add the manifest to the folder.
The code itself :
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>