.limit_toggler CSS Klasse

In dem neuem Theme in Contao 4.4 hat sich ja der grüne Pfeil zum aufklappen in drei Punkte verwandelt.
Genutzt wird dazu u.a. die CSS Klasse .limit_toggler.

Ich benutze diese Toggler in meien Erweiterungen mit callback Modul. Das ist aber leider nicht mehr funktionstüchtig, da dort ein position:absolut auftaucht.
Damit rutscht der Toggler an stellen wo er gar nicht hingehört. Mach ich das wech, oder position:relativ, dann gehts.

Da ich nicht der Profi in CSS bin, worauf bezieht sich das absolut in einer DIV Struktur?

Normalerweise auf das erste umschliessende Element (von innen nach aussen), das selbst positioniert ist, also nicht static, sondern absolute, relative oder fixed.
Edit: Da normalerweise die meisten Elemente nicht positioniert sind, kann man sich das relativ leicht selbst aussuchen, indem man das gewünschte Bezugselement mit position:relative positioniert und einfach keine Position dafür angibt.

Das kann man in der Online-Demo noch nicht sehen, richtig?

Ich habe das in meinem BackendThemeExtended geändert, weil mir das nicht gefiel, dass der grüne Pfeil nach unten rutscht, wenn man aufklappt. Er soll an Ort und Stelle bleiben, sodass ich sofort wieder zuklappen kann. Dazu habe ich dieses CSS drin. .tl_content ist bereits position:relative.

PHP-Code:

---

.tl_content .limit_height {
    padding-left: 30px;
}
.tl_content .limit_toggler {
    position: absolute;
    left: 3px;
    top: 50px;
} 


---

Vielleicht kannst du das gebrauchen.

ps Wenn man Positionsangaben wie top, right, bottom und left nicht angibt, versucht sich das absolut positionierte Element intelligent zu positionieren. Es versucht dann z.B. vorherkommende Geschwister zu berücksichtigen.

So hab ich es mir auch schon aus der Artikelelemente-Ansicht rausgesucht, ich musste mein DIV drüber noch die Klasse tl_content geben, dann war alles OK.

Zitat:

---

Zitat von BugBuster

In dem neuem Theme in Contao 4.4 hat sich ja der grüne Pfeil zum aufklappen in drei Punkte verwandelt.
Genutzt wird dazu u.a. die CSS Klasse .limit_toggler.

Ich benutze diese Toggler in meien Erweiterungen mit callback Modul. Das ist aber leider nicht mehr funktionstüchtig, da dort ein position:absolut auftaucht.
Damit rutscht der Toggler an stellen wo er gar nicht hingehört. Mach ich das wech, oder position:relativ, dann gehts.

---

Ist mir auch gerade aufgefallen, als ich eine meiner Erweiterungen für C4 tauglich machte.

Außerdem habe ich mir Gedanken darüber gemacht, wie ich statt der winzigen drei Punkte den gürnen Pfeil wiederbekomme:

HTML-Code:

---

.limit_toggler button {
        line-height          : 24px;
}

.limit_toggler button span {
        width                : 20px;
        height              : 24px;
        display              : block;
        font-size            : 0;
}

.limit_toggler button.unselectable span {
        background          : url(/system/themes/flexible/images/expand.gif) no-repeat;
}

---

So weit klappt das ganz gut. Wenn man jetzt ein Element aufklappt sollte die Grafik aber gegen collapse.gif ausgetauscht werden. So wie in Contao 3. Außer beim DIV mit der Klasse limit_height ändert sich aber nichts. Dort wird per JS von Contao ein style="height:x" rein- oder rausgeworfen. Da komme ich wohl nur noch selbst mit JS ran, oder? Wie habt ihr das bzw. generell mit dem winzigen Toggler gelöst?