Problem mit dem Agenda Layout bei Intervall

[claudiacarolina]

Hallo zusammen

Ich habe eine Agenda, dessen Layout ich ein wenig meinen Bedürfnissen angepasst habe:

agenda.jpg

Das ging bis anhin alles gut. Nun hat jemand einen Event erstellt und "Intervall" aktiviert: Der Event soll 2 mal in je 2 Wochen wiederholt werden. Das nun bringt mein ganzen Layout durcheinander!

So wie her wäre es gedacht:
http://www.kiss-zeit.ch/index.php/ag...-obwalden.html

Und hier beginnt das Durcheinander, sobald der Event mit Intervall kommt:
http://www.kiss-zeit.ch/index.php/agenda-kiss-cham.html

Ich habe mir den Quellcode ausgedrucht, weiss aber nicht wo ansetzen... :-( kann mir da jemand helfen?? Was muss ich noch im CSS ergänzen?

Für Hilfe wäre ich sehr dankbar.

Claudia

[doggidog13]

ich sehe hier kein css Problem, dass passt soweit.
Nur die Anordnung ist dann durcheinander es kommen 2 event Klassen hintereinander.

ist das ein modul oder werden hier 2 hintereinander aufgerufen?

[Spooky]

Sieh dir den HTML Quellcode an, so funktioniert das nicht. Der header, also zB "(Dienstag) 23.02.2016 18:30" wird separat von den einzelnen Events ausgegeben. Pro Tag wird nur einmal ein header ausgegeben.

[claudiacarolina]

Ja, das habe ich auch gesehen, sobald "Intervall" beim Einstellen des Events aktiviert ist, kommt die ganze Anordnung durcheinander. Doch das macht es einfach.... Ich blicke ehrlich gesagt nicht durch....

[Samuell]

Die einfachste Lösung scheint mir das Template anzupassen, teaser und header mit einem Div zu wrappen.
Dann könnte man header immer float: left; und teaser float: right; geben.
So bliebe jeder in "seiner Ecke".

[claudiacarolina]

Ich nochmals. Habe an anderer Stelle zum gleichen Problem gepostet. Das Problem scheint zu sein, wenn am gleichen Datum 2 Events statt finden.

Hier der genau Beschrieb:
https://community.contao.org/de/show...435#post399435

[Samuell]

Doppelposts zum gleichen Thema sind keine gute Idee.

Weiterhin ist die Lösung für Deinen Anwendungsfall wohl möglich das Template anzupassen und die Events mit einem div zu kapseln.

Sollte jemand die Events nur untereinander ausgeben will er vielleicht sogar nicht zweimal das gleiche Datum haben.
Es ist also kein Problem, sondern ein Feature.

[Spooky]

Wie schon erwähnt ist das kein Problem des Eventmoduls, du musst einfach nur das richtige CSS anwenden. Ich denke du brauchst nicht mal eine Template Änderung, um das zu erreichen, was du haben möchtest.

[Znrl]

Bzw. mir ist nicht 100% klar ob das Datum vor jedes Event soll (auch mehrfach bei gleichem Datum).
Wenn ja, dann müsste man im Template etwas ändern:

Ansonsten müsste es erstmal reichen (Abstände noch anpassen):

.event {
    float: right;
}
.header {
    float: left;
}

[claudiacarolina]

Danke sehr! Das Problem ist jedoch leider noch nicht gelöst. Ich wäre sehr froh, wenn ich am Template nichts machen müsste...

Dies war mein ursprüngliches CSS

agenda.jpg

Wenn ich folgenden Tipp anwende, dann stimmt zwar die Zuordnung der Events zu den Daten, doch steht dann halt alles untereinander

Nimm mal folgende kleine Änderung vor:

#main .mod_eventlist div {
    float: left;
}

Wenn ich zusätzlich dann noch diesen Tipp umsetze (siehe unten), dann ist die Anordung wieder so, wie ich sie haben möchte, doch stimmt die Zuordung der Events zu den Daten nicht mehr. So gehören zum Beispiel die ersten beiden Events beide zum 18.2.

.event {
    float: right;
}
.header {
    float: left;
}

Hier der Link zum Durcheinander (die ersten beiden Events würden beide zum 18.2 gehören - doch es verschiebt sich alles):
http://www.kiss-zeit.ch/index.php/agenda-kiss-cham.html

Gibt es eine Lösung, ohne am Template was machen zu müssen?

Danke euch sehr, Claudia

[Spooky]

Dir fehlt noch ein

#container .mod_eventlist .header {
    clear:right;
} 

[Samuell]

Probier es mal damit:

#container .mod_eventlist .header {
    float: left;
    clear: both;
} 

[claudiacarolina]

Herzlichen Dank!

Nun sieht alles ordentlich aus und es stimmt alles. Beide Varianten klappen :-)

Beste Grüsse
Claudia

[Samuell]

Beide Varianten klappen :-)

clear: both; is die Version für faule und enthält clear:right; :-)

[tab]

[pagespeed-mode]Mit clear:both könnte 1 B (10%) eingespart werden.[/pagespeed-mode]