Angular Material flex = "50" nur für Layout = "row"

Wir verwenden eckiges Material, um eine neue responsive Website zu erstellen.Angular Material flex = "50" nur für Layout = "row"

Zur Zeit verwenden wir nur die Flex-Layouts aus eckigem Material. Wir haben Code wie folgt aus:

<div layout="column" layout-gt-md="row"> 
    <div flex="50"> 
     Here's some text without a fixed length. 
    </div> 
    <div flex="50"> 
     Here's some text without a fixed length. 
    </div> 
</div>

In diesem Fall wollen wir erreichen, dass wir Reihen haben (von links nach rechts) auf großen Displays mit einer Breite von jeweils 50%. Aber das Problem ist: wenn es ein Medium oder ein kleineres Gerät ist, hat es 50% Höhe (max-height um genauer zu sein), die etwas Überlappung mit dem anderen div verursacht, da der Text länger ist als die 50% Höhe des div.

Wie können wir erreichen, dass die flex="50" nur für layout="row" gilt und die Spaltenhöhe sich an die Inhaltsgröße anpasst? Aufschalten der CSS-Klasse zu

.layout-column > .flex-50 { 
    max-height: inherit; 
}

funktioniert nicht.

Ich habe eine demo des Problems auf Plunker bereitgestellt.

Quelle

2016-08-03 Stefan Schmid

Das Problem Weg Visual Studio war HTML-Dateien zu erstellen und zu unserer Aufsicht.

Hinzufügen <!DOCTYPE html> behoben das Problem .... peinlich.

Aber dank @srijith 's Plunker habe ich es endlich bemerkt.

Quelle

2016-08-03 07:56:10

Habe gerade deine Antwort bemerkt!Wie auch immer, schau dir meine aktualisierte Antwort an. Viel Glück! – Srijith

Ihre Lösung sieht auch interessant aus ... wir hatten immer eine Höhe von 100%, wenn wir die maximale Höhe irgendwie auf 100% setzen. Das bedeutet, es hatte zu viel Leerzeichen zwischen den Divs. –

Ja oder die 100% wurden um 33% überschrieben. Mein '! Wichtig' scheint die 100% aufzuheben – Srijith

Ich habe Ihr Problem in einem Plunder versucht und für kleinere Bildschirme passt sich die Höhe an den Inhalt des div.

prüfen diese Plunker rechts here

Dies ist, was habe ich auch

<div layout="column" layout-gt-xs="row"> 
<div flex="50" style="border: 1px solid green;"> 
    <Really long text here> 
</div> 
<div flex="50" style="border: 1px solid green;"> 
    Here's some text without a fixed length. 
</div> 
</div>

UPDATE:

ich Ihre Plunker gegabelt und fixiert. Im Grunde genommen fügte die flex-33 Klasse eine max-height von 33% hinzu. Ich habe nur die max-height-100%

Updated plunk

Quelle

2016-08-03 07:01:10 Srijith

Es sieht tatsächlich wie erwartet aus. Meine lokalen Testergebnisse sind: MS IE - Überlappung; Chrome 52 - Überlappung; MS Edge - sieht wie erwartet aus; FF Dev 49.0a2 - sieht wie erwartet aus. Hat Plunker eine andere Rendering Engine? (getestet mit Chrome und es sieht gut aus, aber "echte" Website überschneidet sich, wenn das Ansichtsfenster zu klein wird, so dass der Text länger wird). –

Ich verstehe. Haben Sie ein Eltern-Div oder etwas, das dieses Verhalten verursachen könnte? Besser noch, wenn Sie einen Plünderer bekommen würden, der Ihr Problem demonstriert, wäre das großartig – Srijith

Hier gehts Sir: https://plnrkr.co/edit/n3r2CBArmzj2cqGeLgeU?p=preview zeigt es das Problem, wenn Sie den Vorschaubereich verkleinern . –

Angular Material flex = "50" nur für Layout = "row"

Antwort

Verwandte Themen