EUF Grid - Spalte zentriert ausrichten?

[winchester]

Liebes Forum,

Ich hab hier eine Frage zum Grid von Erdmann & Freunde.

Wo ich nun absolut nicht weiter komme ist folgendes Szenario:
Ich habe einen Spalte mit col-3 und möchte diese zentrieren - das ist aber mit Offset nicht möglich da col-3 bei 5,5 starten müsste damit es zentriert ist.
Bootstrap arbeitet hier mit flex statt grid und man wendet hier die Klasse auf den Row-Container an.
Bei EuF Grid ist das nicht möglich - habe ich hier etwas übersehen?

Beispiel zur Seite ist unter Administration und Officemanagement zu sowie unter Reinigungsfachpersonal (mit Offsetproblem) zu sehen:
XXXXXXXXXXXXXXXXXXXXXX
(Hab den Link rausgenommen - führte zu viel Verwirrung )

Viele Grüße Winchester.

[wanst]

Servus Winchester,

bei deinem Link kommt ein 404. Heißt das, das Problem ist gelöst?

LG

[winchester]

Hy,

Gelöst mit einem Workaround - Seite ist mittlerweile Live (Link ist aktualisiert und wird in den nächsten Tagen dann entfernt).
Ich habe das nun wie folgt gelöst:
Bei Elementen wo ich das benötige stelle ich die Row auf Display:flex.
Dann die Anweisungen für die Kindelemente und Breakpoints (nur jene die ich im Einsatz habe).

Ist nicht sonderlich schön aber es tut was es soll - ich bin mir aber unschlüssig, ob die Verwendung von Grid statt Flex hier so gut ist.
Im Vergleich mit anderen Frameworks fällt auf, dass diese alle auf Flex arbeiten - kann aber nicht beurteilen was hier besser oder schlechter ist.

Viele Grüße

[wanst]

Alles klar.

Ist nicht sonderlich schön aber es tut was es soll - ich bin mir aber unschlüssig, ob die Verwendung von Grid statt Flex hier so gut ist.
Im Vergleich mit anderen Frameworks fällt auf, dass diese alle auf Flex arbeiten - kann aber nicht beurteilen was hier besser oder schlechter ist.

Solange es funktioniert und du der Einzige bist, der die Website von Entwicklerseite betreuen muss – warum nicht.

[winchester]

Ja das stimmt schon nur muss es halt bei jeder Änderung angepasst werden.
Wenn beispielsweise ein Mitarbeiter das Unternehmen verlässt dann muss hier wieder von flex auf grid umgestellt werden.

Aber ja - so als Workaround klappt es

[wanst]

Hm, OK, das müsste ich sehen, um es beurteilen zu können. Verstehe das Problem noch nicht so ganz. Eigentlich kannst du mit Grid so ziemlich alles ausrichten, wie du willst.

[winchester]

Hy,

Ich habe hier das Problem verdeutlicht:

1) 3x3er Spalten = 9 Spalten und somit mit Start nicht mehr sauber auszurichten da Offset 1,5 Spalten wären, Zentrierung klappt nicht egal mit welcher klasse oder Eigenschaft
2) Einzelne 3er Spalte = 3 Spalten und mit Start ist es trotztem um ein halbe Spalte versetzt,

https://xxxxxxxxx.com/

Viele Grüße Winchester

[tab]

Das erinnert mich irgendwie an Apollo 13 ...

[mlweb]

Mit dem Grid von Dennis kann man sicher nicht alle Möglichkeiten nutzen, die Grid-CSS bietet, aber das was Du möchtest sollte gehen.
Es gibt Klassen für den Start (in der älteren Version war das offset).

Setze einfach in Deinem Beispiel für das erste Element zusätzlich die Klasse col-start-lg-3 (bei Grid Optionen im Backend). Damit beginnen Deine Elemente erst in der dritten Reihe.

[winchester]

Hy,

Ja Offset / Start verwenden wir.
Jedoch geht das nur bei geraden Spalten, wenn ich eine 3er Spalte zentrieren möchte, dann klappt das nicht und ich habe hier eine unsymmetrische Anordnung.

Im Link findest du das Beispiel ganz unten.

Lg
Winchester

[Black Pirate]

Wenn man mit EuF (oder Teilen davon) arbeitet, würde ich als erstes nachschauen wie EuF das macht.
Als Beispiel kann man sich bei einer Demo das News-Modul ansehen, da wird per Klasse "news-grid" das display:flex hinzugefügt.

(wenn man dann noch "justify content: center" mit gibt, ist es auch zentriert)

[winchester]

Hy,

hast du einen Link dazu?
Ich konnte bei den Themen keine ähnliche Darstellung finden .
In den Themen sind alle Elemente immer voll ausgefüllt und ggf. durch den Container vom Article beschränkt.

Lg

[Black Pirate]

Nun ja, es gibt leider keine Demo (glaube ich zumindest) von Dennis, die genau deine Anforderung zeigt.
Ich wollte eigentlich nur sagen, das auch EuF das Flexbox-Modell verwendet zum zentrieren.
(das News-Modul ist ein Beispiel, bei dem die Flexbox genutzt wird)

Auch in vielen anderen Dokumentationen liest man, dass innerhalb der Grid-Spalte, die einfachste Lösung zum zentrieren das Flexmodell ist.

Somit ist bei deiner Lösung ja alles in Ordnung.
(Habs mir jetzt nicht im Detail angesehen, aber die Darstellung scheint so zu sein wie du gewollt hast)


Ich würde mich da jetzt auch nicht auf Biegen und Brechen ins Grid versteifen, weil es ja einfach mit display:flex zu lösen ist.

[wanst]

Ich verstehe schon das Problem, das der TE hat: jedesmal, wenn sich was ändert, muss jemand (ein Redakteur) beachten, bei mehr als 4 oder weniger als 5 Einträgen eine CSS-Klasse zusätzlich einzutragen oder zu entfernen. Das ist nicht immer trivial ... mit dem Personal ...

[wanst]

Du kannst das eventuell im Template automatisieren: weniger als 5 Einträge => flex-Klasse dazu.

[Black Pirate]

Wieso den?

Sagen wir, ich fixe das Flex-Item auf 25%
Dann sind max. 4 nebeneinander
Ab dem 5ten kommt eine neue Zeile.

Das geht auch responsiv
- Desktop 4 pro Zeile: item 25%
- Tablet 3 pro Zeile: item 33%
- Mobile 2 pro Zeile: item 50%


Wenn das ganze als Modul/Inhaltselement/etc. angelegt ist, dann erstellt der Redakteur nur einen Eintrag - dieser wird automatisch der entsprechenden Abteilung angefügt.
Der Redakteur braucht keine Kenntnisse über CSS, Klassen, etc.

[Franko]

Naja, CSS Grid (only) kann das allemal:
https://www.youtube.com/watch?v=epwoVzdCq_M

[wanst]

@BlackPirate: Dann ist die letzte Zeile aber auch zentriert. Weiß nicht – ist das gewollt?
Bildschirmfoto 2022-09-22 um 15.55.27.png … hab dem flex noch ein flex-warp: wrap mitgegeben.

@Franko: Das ist ja nur innerhalb einer Grid-Zelle, nicht die Zelle(n) im Grid (darum geht es dem TE aber, wenn ich das richtig verstanden hab).

[Black Pirate]

Gemäss Vorschau des TE sind alle Zeilen zentriert.


Ich denke es ist wie immer, viele Wege führen nach Rom

[wanst]

… aber immer tut einem hinterher der Allerwerteste weh.

[wanst]

Stimmt, die Originalseite hatte ich gar nicht mehr gesehen (hatte vorher einen Fehler). Aber dann ist das doch die Lösung, oder?

[winchester]

Stimmt, die Originalseite hatte ich gar nicht mehr gesehen (hatte vorher einen Fehler). Aber dann ist das doch die Lösung, oder?

Hab nun den Link rausgenommen und nur mehr die Demo hier:
https:/xxxxxxxxx.com

Dort siehst du die letzte Zeile ist mit Offset nicht mittig zu bekommen

Meine Zusammenfassung / Erkenntnisse:
Display Grid lässt keine Zentrierung wie gewünscht zu - es beeinflusst nur den Container.
Offset funktioniert (logischerweise) nur bei gerade Spaltenzahl (also 2+2, 3+3, 4, 6 usw... aber nicht bei 3+3+3, 3, 5,1 usw da hier eine halbe Spalte Offset / start fehlt).

Wie hier bereits richtig angemerkt wurde, ist sowas immer etwas problematisch bei den Redakteuren - wenn der Kunde hier etwas anpasst wird es immer Rückfragen geben aber da dies ein Bereich ist, der sich relativ selten ändert kann ich damit leben. Die zweite Problematik bin ich selber - wenn in 2 Jahren hier etwas zu ändern ist, werde ich es vermutlich schon vergessen haben und ein paar Fragezeichen über dem Kopf haben

Viele Grüße an alle und danke für eure Mithilfe
Winchester

[Black Pirate]

Mach es dir einfach und erstelle ein Inhaltselement oder Modul.
Dann kann der Redakteur simple Einträge generieren und braucht keine sonstigen Kenntnisse.

Beispielsweise eine Tabelle mit den nötigen Feldern
- Bild
- Name
- Funktion
- Abteilung

Template zur Darstellung mit foreach und if/else Schleifen.
Dann wird alles automatisch am richtigen Ort mit richtiger Darstellung gelistet.

[wanst]

… - wenn in 2 Jahren hier etwas zu ändern ist, werde ich es vermutlich schon vergessen haben und ein paar Fragezeichen über dem Kopf haben …

Freak, wer nicht alle zwei Jahre ein Redesign launcht! Also spätestens.

Nein, im Ernst: So, wie du das jetzt in der oberen Zeile eingerichtet hast, also mit Flex-Hack, passt es doch, oder? Sowohl für gerade, wie für ungerade Elemente. Dann kannst du es doch überall so machen und legst es gleich im CSS fest, damit Redakteure keine Klassen mehr von Hand setzen müssen.

[winchester]

Mach es dir einfach und erstelle ein Inhaltselement oder Modul.
Dann kann der Redakteur simple Einträge generieren und braucht keine sonstigen Kenntnisse.

Beispielsweise eine Tabelle mit den nötigen Feldern
- Bild
- Name
- Funktion
- Abteilung

Template zur Darstellung mit foreach und if/else Schleifen.
Dann wird alles automatisch am richtigen Ort mit richtiger Darstellung gelistet.

Hmm verstehe was du meinst und geht ja auch recht einfach aber sehe ich in diesem Fall als komplizierten Workaround den uns solche Frameworks ja eigentlich abnehmen sollten.

Freak, wer nicht alle zwei Jahre ein Redesign launcht! Also spätestens.

Nein, im Ernst: So, wie du das jetzt in der oberen Zeile eingerichtet hast, also mit Flex-Hack, passt es doch, oder? Sowohl für gerade, wie für ungerade Elemente. Dann kannst du es doch überall so machen und legst es gleich im CSS fest, damit Redakteure keine Klassen mehr von Hand setzen müssen.

Wir haben gerade ein Projekt von 2014 besprochen - da reden wir von Contao 2.11
Natürlich wäre ein jährlicher Termin sehr sinnvoll wo alles wieder auf den neuesten Stand gebracht wird und auch an die Unternehmensziele angepasst werden aber viele Kunden sind hier noch sehr old-School unterwegs. Habe von befreundeten Agenturen sogar gehört, dass sich 2 Kunden sogar gegen das DSGVO update gesträubt haben und auch kein SSL wollen (wir reden hier von sehr geringen Kosten) aber das lässt schon einige Rückschlüsse zu
Ja es passt soweit für das Projekt - ist jedoch nicht ganz wie ich es mir vorstelle für den Workflow weil mir die Flexbox besser gefällt als das Grid und ich es auch von Bootstrap so kenne.

Viele Grüße
Winchester

[tab]

Hmm verstehe was du meinst und geht ja auch recht einfach aber sehe ich in diesem Fall als komplizierten Workaround den uns solche Frameworks ja eigentlich abnehmen sollten.



Wir haben gerade ein Projekt von 2014 besprochen - da reden wir von Contao 2.11
Natürlich wäre ein jährlicher Termin sehr sinnvoll wo alles wieder auf den neuesten Stand gebracht wird und auch an die Unternehmensziele angepasst werden aber viele Kunden sind hier noch sehr old-School unterwegs. Habe von befreundeten Agenturen sogar gehört, dass sich 2 Kunden sogar gegen das DSGVO update gesträubt haben und auch kein SSL wollen (wir reden hier von sehr geringen Kosten) aber das lässt schon einige Rückschlüsse zu
Ja es passt soweit für das Projekt - ist jedoch nicht ganz wie ich es mir vorstelle für den Workflow weil mir die Flexbox besser gefällt als das Grid und ich es auch von Bootstrap so kenne.

Viele Grüße
Winchester

Flexbox ist Flexbox und Grid ist Grid. Wenn mir Flexbox besser gefällt, dann nehme ich halt gleich Flexbox. Ein Grid hat halt normalerweise keine halben Spalten und verschiebt auch keine seiner Spalten um eine halbe Spalte. Da muss man dann zumindest mehr "tricksen", als man es von einem durchschnittlichen Redakteur erwarten kann. Ich bin da ziemlich zuversichtlich, dass ich die fraglichen Inhalte der jetzigen 3er Spalten mit dem EUF Grid (und vielleicht ein paar eigene CSS-Regeln für die Inhalte) zentriert bekommen würde ohne Flexbox.

Zum Thema Contao 2.11 würde ich behaupten, dass die weitere Verwendung gegen geltendes Recht verstösst und erhebliche Kosten auslösen kann, wenn eine abmahnberechtigte Organisation den Kunden auf dem Kieker hat, einen Tipp erhält oder sich einfach systematisch neue Einnahmequellen erschliesst . Dagegen dürften dann sogar die Kosten eines kompletten Relaunchs eher Peanuts sein. Und das sind ja Kosten, die zur Lösung des ursächlichen Problems rein gar nichts beitragen. Update oder Relaunch wären dann immer noch zusätzlich zu finanzieren - oder die Website vom Netz zu nehmen. Fehlendes SSL ist zwar meiner Meinung nach an sich nicht strafbar, solange keine persönlichen Daten übertragen werden. Aber wer im Web auf der systematischen Suche nach einer neuen Milchkuh ist, die man mal ein wenig melken könnte, der wird sicher durch fehlendes SSL veranlasst, hier einmal etwas genauer hinzuschauen.

[wanst]

… Wir haben gerade ein Projekt von 2014 besprochen - da reden wir von Contao 2.11 …
… DSGVO …
… SSL …

Zuerstmal: das mit dem Freak war ein Scherrrz – ich hoffe, das war deutlich!
Aber … oh weh, so viele Leichen im Keller … da sag ick ma: Uff! Wa?! Da hat man es nicht leicht als Entwickler!

Bei mir hat die Notwendigkeit der Umstellung auf Responsive Design vor Jahren da viel als Erklärungsstütze geholfen (also insbesondere bei der 2.11-Installation, die ich dann gleich mal auf 4.x aktualisiert hab).
DSGVO-konform kann man Contao ja inzwischen auch ohne Cookies betreiben, oder?
Und SSL – ähm … welcher Browser/welches Gerät zeigt das denn überhaupt noch an, ohne laut und rot zu kreischen? Das muss doch wehtun.

Bei solchen Kunden erkläre ich gern mal einen kategorischen Haftungsausschluss. Das rüttelt die meisten dann wach.
Aber in der Essenz muss ich wohl dankbar für meine verständigen Kunden sein.

[mlweb]

Bei solchen Kunden erkläre ich gern mal einen kategorischen Haftungsausschluss. Das rüttelt die meisten dann wach.

Ja so ähnlich habe ich das auch gemacht, was Datenschutz oder HTTPS betrifft.

Ich bin aber insgesamt sehr rigoros was die Betreuung alter Contao-Installationen betrifft. Ich sage dem Kunden, das ich seine Installation einfach nicht/nicht mehr betreue (auch nichts ausnahmsweise), wenn er nicht bereit ist, Contao auf eine derzeit unterstützte Version anzuheben. Muss aber auch zugeben, dass ich dadurch auch schon Kunden verloren habe bzw. den Auftrag gar nicht erst bekommen habe. Das war es mir aber Wert. Es reicht schon, wenn man in uralten Installationen herumwühlen muss für ein Update. Die mehr oder weniger großen Problemchen solcher Uralt-Installationen mag ich mir tatsächlich nicht ans Bein binden.