Angular-Material: Grenze md-Inhalt Höhe

Ich habe mit einigen Integrationsproblemen auf Angular-Material gekämpft.Angular-Material: Grenze md-Inhalt Höhe

Auf der Probe von Code unten, ich versuche, die Orangediv und die blaudiv zu zwingen, die gleiche Höhe flex="50" durch Zugabe zu haben. Ein md-content untergeordnetes Element des blue div, das einen großen Text enthält, wächst jedoch in der Höhe, während es gleich bleiben und innerhalb seiner Grenzen scrollen sollte.

http://codepen.io/anon/pen/oxyBMJ

Wie kann ich zwingen, das md-content Element nicht nicht in die Höhe zu wachsen unabhängig von der Länge der es Inhalt ist?

Danke für Ihre Hilfe

Quelle

2016-04-19 Pierre Roudaut

das funktioniert so..the blau div Kinder blättern hat und die Höhe nicht increasin oder verfeinern mehr Ihr Problem – DK3

Aber ich möchte, dass die orange und blau div die gleiche Höhe halten. Weil in diesem Fall, wenn ich mehr Inhalt zum 'md-Inhalt' hinzufüge, wird das Türkis-div in der Höhe wachsen, wenn ich möchte, dass es die gleiche Höhe bleibt und scrollt, wenn du siehst, was ich meine –

Sie sollten md-content als Haupt-Container verwenden.

<md-content layout-fill layout="column"> 
<div flex="50" style="border: 5px solid orange" layout="row"> 
</div> 
<div flex="50" style="border: 5px solid blue" layout="row"> 
</div> 
</md-content>

So sollte Ihre Grundstruktur aussehen. Definieren Sie nun die Flex-Werte wie gewünscht und Sie erhalten ein entsprechendes Ergebnis. Sehen Sie den folgenden Link für Ihren Code.

http://codepen.io/next1/pen/vGrWaM

Quelle

2016-04-20 05:14:47 nextt1

Das ist großartig! Aber vorausgesetzt, ich habe eine komplexere verschachtelte Struktur. Wie erreiche ich das gleiche Ergebnis in Kindercontainern? Zum Beispiel: http://codepen.io/anon/pen/vGrdrd –

http://codepen.io/next1/pen/qZKodp versuchen Sie dies zu erreichen? – nextt1

Ziemlich viel, ja, aber kann ich es mit dem blauen div auf der linken Seite arbeiten lassen, die du im Code kommentiert hast? Gibt es ein Layoutmuster, um unendlich scrollbaren MD-Inhalt zu verschachteln? Vielen Dank für Ihre Hilfe –

Sie haben die Eltern der beiden divs eine maximale Höhe zu geben und dann GIV Sie md-Inhalt height:100%; and overflow:auto; wie dieser md-Gehalt wird die gleiche Höhe wie „Kontakt“ und sie bleiben nicht die Eltern wachsen über, und die oberen nicht PUSCH

http://codepen.io/danyweis/pen/oxyZLK

Quelle

2016-04-19 17:38:25 DanyCode

Danke mate! Gibt es eine Möglichkeit, es etwas modularer zu gestalten, ohne ein Limit in Pixeln angeben zu müssen? –

Sie können es in% begrenzen, aber die wichtige Sache ist, dass das Elternteil eine begrenzte Höhe hat, wenn es nicht funktioniert – DanyCode

Angular-Material: Grenze md-Inhalt Höhe

Antwort

Verwandte Themen