web-dev-qa-db-fra.com

Matériau angulaire: Comment changer le rembourrage supérieur de la tuile mat-grid-tile

suis en utilisant angular-material with angular 5. mat-grid-tile a son propre remplissage supérieur qui calcule selon la méthode calc. 

Je veux définir un remplissage personnalisé sur mat-grid-tile. Comment puis-je faire ceci?

html5css3angular5angular-material2
5
Sony Khan

Le composant de tuile de grille définit le remplissage supérieur de manière dynamique sur l'élément lui-même. Vous devez donc utiliser le modificateur! Important dans votre CSS pour le remplacer.

HTML:

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

CSS:

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

Pour supprimer le rembourrage au-dessus de la mosaïque de grille de tapis, limitez la hauteur de celle-ci à l'aide de cette ligne de code:

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

Incrémentez ou réduisez les pixels pour s’adapter à toutes les lignes du contenu de votre mosaïque.

0
pmkent

Régler rowHeight de mat-grid-list fonctionne pour moi, le G. Tranter ne fonctionne pas car la liste de mat-grid-list a un remplissage. Elle est également définie de manière dynamique et ne peut pas être réglée avec! 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>

Réf.: https://material.angular.io/components/grid-list/examples

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