css - angularアプリケーションでチャートの高さを変更するときにCSSスタイルがうまく機能しない

Question

これが私のプランカーです。json オブジェクトをチャートに渡しwidth 100%ています。折れ線チャートと高さを 100px に指定したいのですが、高さを最小化すると css が期待どおりに機能しません。グラフは、親の div/パネルの高さと幅を取りません。

Answer 1

customCSSを使用して次元を指定します。

CSS:

.panel{width:100%;height:300px;}
.panel-body{width:100%;height:270px;}
.chart-container{height:100%!important;}
canvas{width:100%;height:100%!important;}

デモ: http://plnkr.co/edit/gVRwrEKWA9HaTCWgbyIS?p=preview

ウィンドウのサイズが変更されると、キャンバスとグラフは、スタイルシートの css ルールをオーバーライドするインライン スタイルとして新しい次元を取得します。このオーバーライドを防ぐには、次を使用します。!important