web-dev-qa-db-fra.com

Comment ajouter un remplissage ou une marge uniquement au conteneur de disposition dans Angular ngMaterial?

Lorsque j'ajoute layout-margin ou layout-padding à un conteneur de présentation, cela ajoute une marge/un remplissage autour de chaque élément enfant flex et au conteneur lui-même.

Exemple:

<div layout="row" layout-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>

 flex with margins

Je veux ajouter des marges au conteneur et non aux enfants du conteneur.

 margins to container only

Existe-t-il une classe prédéfinie dans la conception de matériau pour ajouter un remplissage ou une marge au conteneur de présentation sans les ajouter aux enfants à l'intérieur du conteneur de présentation?

angularjsmaterial-designflexboxangular-material
7
Mustapha Aoussar

zps215 a la meilleure réponse, même s'il n'utilise pas ngMaterial, l'effet que vous recherchez est mieux résolu en utilisant du CSS normal. Cependant, la meilleure solution consisterait à utiliser un remplissage sur le conteneur parent plutôt que sur la marge.

.container {
    padding: 20px;
}

Cependant, si vous avez vraiment besoin de résoudre ce problème avec ngMaterial, vous pouvez envelopper votre balisage dans une autre div et y ajouter une marge de présentation.

<div layout-margin>
  <div layout="row">
    <div flex>Parent layout and this element have margins.</div>
  </div>
</div>

Cela produirait le même effet souhaité, bien que cela puisse prêter à confusion pour quiconque ajoute des enfants à cette div, car ils obtiendraient également une marge.

1
Voziv

Vous pouvez créer un parent de classe pour container et écrire css comme suit.

.container {
   margin : 20px;
}

J'espère que cela t'aides!

1
Zeel Shah