2017-12-31 264 views
1

角度および角度材のフレームワークを使用してコンポーネントのデザインに問題があります。check_box_outlineアイコンには余分なスペースが必要です

すべてはmat-sidenav-containerに基づいています。 sidenavにはアコーディオンが含まれています。つまり、「カテゴリ」と言いましょう。各拡張パネルの中には、アイテムの選択リストがあります。ここまでは順調ですね。選択リストの上

は、私は1つの項目が含まれている定期的なmat-listを追加しました。項目には、キャプションと「すべて選択」オプションが含まれます。 「すべて選択」ユーティリティでは、関連するクリック可能なmat-iconを使用しました。

mat-iconcheck_box_outlineに設定されている場合を除き、すべてがうまくいっていたようです。このようなアイコンは、サイドナビゲーション内に水平スクロールバーを表示します。アイコンの後に空白がいくつか追加されているように見えますが、理由はわかりません。他のアイコンには表示されません。check_box_outline_blankindeterminate_check_boxも表示されません。

the icon causes the horizontal scroll bar appeard

exactelyこのバグとどのようにスクロールバーの外観を防ぐためには、原因を考えて誰がいますか?

関連コードとデモon stackblitzappフォルダ内)を貼り付けました。私はこの問題を示すためにできるだけシンプルにコードを保管していました。私はどんな助けにも感謝しています。

答えて

1

F12ツールを使用して、私は障害のある要素の幅を見ることができないが、それは見た目ほどmat-icon要素の内側の内容はmat-sidenavコンテナのオーバーフローの際に考慮されている場合:

<mat-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true"> 
       check_box_outline 
</mat-icon> 

レンダリングされたHTMLにcheck_box_outlineを編集すると、そのコンテンツが表示されなくてもスクロールバーは新しいコンテンツに適応します。

Styles.cssをに次のCSSスタイルを追加すると、問題を解決するために表示されます(the modified stackblitzを参照してください):

.material-icons { 
    overflow: hidden; 
} 
+0

おかげで、これは問題を解決しました。 –

関連する問題