Ergebnis 1 bis 5 von 5

Thema: .limit_toggler CSS Klasse

  1. #1
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.512
    User beschenken
    Wunschliste

    Standard .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?
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

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

    Support Contao

    Standard

    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.
    Geändert von tab (18.06.2017 um 15:48 Uhr)

  3. #3
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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-left30px;
    }
    .
    tl_content .limit_toggler {
        
    positionabsolute;
        
    left3px;
        
    top50px;

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  4. #4
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.512
    User beschenken
    Wunschliste

    Standard

    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.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  5. #5
    Contao-Urgestein Avatar von Samson1964
    Registriert seit
    05.11.2012.
    Ort
    Berlin
    Beiträge
    2.794

    Standard

    Zitat Zitat von BugBuster Beitrag anzeigen
    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?
    Viele Grüße
    Frank

    Seit Mai 2013 Fan von Contao
    Webmaster vom Deutschen Schachbund und Berliner Schachverband
    Mein Blog: Schachbulle
    Meine Erweiterungen bei GitHub
    Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung

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
  •