web-dev-qa-db-ja.com

Angular Material：mat-grid-tileの上部パディングを変更する方法

angular-material with angular 5.を使用しています。mat-grid-tileには、calcメソッドを使用して計算する独自の上部パディングがあります。

マットグリッドタイルにカスタムパディングを設定したい。これどうやってするの？

htmlcssangular5angular-material2
5
Sony Khan

グリッドタイルコンポーネントは要素自体に動的に上部パディングを設定するため、CSSで！important修飾子を使用してオーバーライドする必要があります。

HTML：

<mat-grid-tile class="my-grid-tile"></mat-grid-tile>

CSS：

.my-grid-tile {
    padding-top: 24px !important;
}
4
G. Tranter

マットグリッドタイルの上のパディングを取り除くには、次のコード行を使用してマットグリッドタイルの高さを制限します。

<mat-grid-list cols='2' rowHeight='200px'>
</mat-grid-list>

マットタイルコンテンツのすべての行に合うようにピクセルを増減します。

0
pmkent

Mat-grid-listのrowHeightの設定は私には有効ですが、G-Tranterは、mat-grid-listにパディングがあるため機能しません動的でもあり、！importantで設定することはできません。

 <!-- 70px to prevent hide floatLabel in matInput --> 
 <mat-grid-list cols="2" rowHeight="70px">
    <mat-grid-tile>
       <!-- your controls --> 
    </mat-grid-tile>
  </mat-grid-list>

参照： https://material.angular.io/components/grid-list/examples

"@angular/material": "^6.4.3"
"@angular/core": "^6.1.0"
0
Juan Pablo