Contao-Camp 2024
Ergebnis 1 bis 28 von 28

Thema: EUF Grid - Spalte zentriert ausrichten?

  1. #1
    Contao-Fan
    Registriert seit
    14.07.2011.
    Beiträge
    276

    Standard EUF Grid - Spalte zentriert ausrichten?

    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.
    Geändert von winchester (23.09.2022 um 09:41 Uhr) Grund: Link aktualisiert

  2. #2
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

    Servus Winchester,

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

    LG

  3. #3
    Contao-Fan
    Registriert seit
    14.07.2011.
    Beiträge
    276

    Standard

    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

  4. #4
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

    Alles klar.
    Zitat Zitat von winchester Beitrag anzeigen
    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.

  5. #5
    Contao-Fan
    Registriert seit
    14.07.2011.
    Beiträge
    276

    Standard

    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

  6. #6
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

    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.

  7. #7
    Contao-Fan
    Registriert seit
    14.07.2011.
    Beiträge
    276

    Standard

    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
    Geändert von winchester (26.09.2022 um 10:24 Uhr)

  8. #8
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das erinnert mich irgendwie an Apollo 13 ...

  9. #9
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Geändert von mlweb (22.09.2022 um 14:41 Uhr)
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  10. #10
    Contao-Fan
    Registriert seit
    14.07.2011.
    Beiträge
    276

    Standard

    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

  11. #11
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    224

    Standard

    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)

  12. #12
    Contao-Fan
    Registriert seit
    14.07.2011.
    Beiträge
    276

    Standard

    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

  13. #13
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    224

    Standard

    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.

  14. #14
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

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

  15. #15
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

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

  16. #16
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    224

    Standard

    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.

  17. #17
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Naja, CSS Grid (only) kann das allemal:
    https://www.youtube.com/watch?v=epwoVzdCq_M
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  18. #18
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

    @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).
    Geändert von wanst (22.09.2022 um 15:57 Uhr) Grund: Edit: Screenshot

  19. #19
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    224

    Standard

    Gemäss Vorschau des TE sind alle Zeilen zentriert.


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

  20. #20
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

    … aber immer tut einem hinterher der Allerwerteste weh.

  21. #21
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

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

  22. #22
    Contao-Fan
    Registriert seit
    14.07.2011.
    Beiträge
    276

    Standard

    Zitat Zitat von wanst Beitrag anzeigen
    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
    Geändert von winchester (26.09.2022 um 10:24 Uhr)

  23. #23
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    224

    Standard

    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.

  24. #24
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

    Zitat Zitat von winchester Beitrag anzeigen
    … - 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.

  25. #25
    Contao-Fan
    Registriert seit
    14.07.2011.
    Beiträge
    276

    Standard

    Zitat Zitat von Black Pirate Beitrag anzeigen
    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.

    Zitat Zitat von wanst Beitrag anzeigen
    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

  26. #26
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von winchester Beitrag anzeigen
    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.

  27. #27
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    213

    Standard

    Zitat Zitat von winchester Beitrag anzeigen
    … 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.
    Geändert von wanst (26.09.2022 um 11:18 Uhr)

  28. #28
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von wanst Beitrag anzeigen
    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •