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!
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.
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
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