Layout-Padding entfernen, das auf Kind in eckigem Material angewendet wird

Question

Das Folgen ist mein Code, in dem ich versuche, Padding nur Elterndiv hinzuzufügen, aber irgendwie layout-padding wird auch auf das innere div <div layout="column" flex> angewandt, das das div macht, um sich etwas zu verschieben. Überprüfen Sie bitte den beigefügten Screenshot -

Mein Code -

<div layout="row" style="height: 100%;" layout-padding> 
     <div id="r2" flex="20">This is content one</div> 

     <div layout="column" flex> 
      <div id="r3" flex="15">This is content two</div> 
      <div id="r7" flex>This is content three</div> 
     </div> 
    </div> 

EDIT - ich in der Dokumentation gesucht als gut, aber nicht in der Lage https://material.angularjs.org/latest/layout/options

Answer 1

Die docs zu lokalisieren sagen „Layout -padding fügt innerhalb jedes Flex-Childs einen Padding hinzu. Außerdem fügt er dem Layout-Container selbst einen Padding hinzu. "

Wenn Sie genau hinsehen, werden Sie sehen, dass der Text in der linken Div mit dem in der rechten oberen Div ausgerichtet ist. Es ist nur so, dass das linke div kein inneres div hat, wie das rechte div.

Ich würde vorschlagen, dass Sie entweder die Polsterung von Hand in den Zeilen hinzufügen

Zum Beispiel (keine Winkelmethode, da dies keine einfache Option zu sein scheint.):

<div layout="row" style="height: 100%; padding:1em "> 

Ich gestehe, dass ich Angular nicht kenne, also gibt es vielleicht eine Methode, die ich nicht sehe (oder verstehe).

OR..add eine interne div zu #r2

<div id="r2" flex="20"> 
    <div>This is content one</div> 
</div> 

dann die Polsterung an der Innenseite des #r2 wird, daß der Spalten div auf der Innenseite entsprechen.

Im Wesentlichen hebt die Polsterung auf den Flex-Kindern ihre unterschiedlichen Inhalte hervor.

Answer 2

Wenn Sie md-no-style als Klasse für das entsprechende Element hinzufügen, werden alle auf das Element angewendeten Stile entfernt.

---

<div layout="row" style="height: 100%;" layout-padding> 
    <div id="r2" flex="20">This is content one</div> 

    <div layout="column" flex> 
     <div id="r3" flex="15">This is content two</div> 
     <div id="r7" flex>This is content three</div> 
    </div> 
</div> 

---