Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

FlexCards-Cards ausgerichtet untereinander

Begonnen von rolinux, 05. Januar 2023, 13:29:04

« vorheriges - nächstes »

rolinux

Hallo,

ich hatte mit dem Plugin FlexCards das Problem, dass mehrspaltige Rows untereinander manchmal nicht spaltengenau ausgerichtet sind, was dann nicht schön ausieht. Deshalb baue ich einen div-Container um die Cards.

Dafür habe ich mir ein Syntax-Element definiert:
container = <div style="width: {DESCRIPTION}">{VALUE}</div>
In der Seite wird das dann so verwendet:
{FlexCards|Row|
[container=400px|{FlexCards|Card|Titel|Text|Fuß}]
[container=400px|{FlexCards|Card|Titel|Text|Fuß}]
}
{FlexCards|Row|
[container=400px|{FlexCards|Card|Titel|Text|Fuß}]
[container=400px|{FlexCards|Card|Titel|Text|Fuß}]
}

Dadurch werden alle Karten in der gleichen Spalte untereinander positioniert.

Der Vorteil gegenüber einer Tabelle ist, dass die Karten dann beim responsiven Layout auf dem Smartphone untereinander statt nebeneinander angezeigt werden. Bei einer Tabelle würden die Karten immer noch nebeneinander angezeigt, was z.T. dann ziemliche Verschiebungen mit sich bringt und je nach Inhalt sogar unlesbar wird. (Ich hatte das Problem, dass auf der Vorstandsseite eines Vereins bei den Vorstandsmitgliedern Bilder mit angezeigt werden sollen.)

Gruß
Rolf

P.S.: Die Möglichkeit, eigene Syntaxelemente zu bauen, ist einfach nur geil!
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

marusti

Hallo Rolf,
wenn ich dich richtig verstanden habe: Dei Reihen sind so eingestellt, das die Karten immer mittig ausgerichtet sind.
Wenn du das nicht möchtest, kannst du auch in der plugin.css Zeile 14 und 15 von "center" auf "flex-start" ändern.

rolinux

Bei mir steht in Zeile 14 und 15 nichts von center. Auch nicht in 15 und 16, wenn ich die beiden Zeilen zurechne, die ich weiter oben eingefügt habe.

Bei mir sieht die plugin.css so aus:
.flexcards-container {
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: row;
 flex-direction: row;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 /*-webkit-justify-content: center;*/
 /*justify-content: center*/
 -webkit-justify-content: left;     /*RL30122022*/
 justify-content: left;             /*RL30122022*/
}
.card {
 display: flex;
 flex-direction: column;
 min-width: 200px;
 /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/    /*RL30122022*/
 border-radius: 5px;
 overflow: hidden;
 margin: 10px;
}
.card-header {
 /*background: #eee;*/
 background: inherit;   /*RL30122022*/
 padding: .625rem;
}
.card-content {
 flex: 1;
 padding: .625rem;
}
.card-footer {
 flex: 0;
 /*background: #eee;*/
 background: inherit;   /*RL30122022*/
 padding: .625rem;
}

Ich habe nur die Stellen geändert bzw. hinzugefügt, die mit meinem Kürzel markiert sind.

Abgesehen von der Ausrichtung wird bei mir der Inhalt aber auch zusammengeschoben, sodass z.B. längere E-Mail-Adressen umgebrochen werden.

Gruß
Rolf
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

marusti

versuch es mal damit
-webkit-justify-content: flex-start;   
 justify-content: flex-start;
Wenn du nicht willst das die Sätze umgebrochen werden, kannst du sowas wie
white-space: nowrap; versuchen. Dann läuft der Text aber vermutlich aus der Karte raus