CSS-Probleme

[mv_alex]

Hi,

ich nutze die Tag-Cloud für News unter (jetzt) Contao 3.2.14.

Nach dem Core-Update auf eben diese Version sind mir Fehldarstellungen in der Tag-Cloud aufgefallen, die ich mir nicht erklären kann. Listenpunkte werden nicht mehr dargestellt oder ragen rechts über den Rand des Moduls hinaus, außerdem sind Lücken in der Cloud.

Testweise habe ich das aktuelle CSS aus Github importiert, das zeigt aber die gleichen Probleme.

Eigentlich kann ich mir kaum vorstellen, dass dies mit dem Core-Update zusammenhängt. Ist da irgendetwas in der Richtung bekannt?

Danke & Gruß
Alex

[ways2web]

schon ne systemwartung durchgeführt oder user-cahe gelöscht in contao?

[mv_alex]

Ja, hatte ich; zur Sicherheit jetzt nochmal gelöscht.

Ich habe mal einen Screenshot mit dem 1:1 aus der aktuellen Github-Version übernommenen Stylesheet gemacht:

tag-cloud.png

Gruß Alex

[Bas]

Ohne Ansicht der Seite (hast mal nen Link?) kann man nur vermuten.

Meine Vermutung ... die Tags stehen in einem DIV mit fester Breite, welcher breiter ist als der der umgebende Div der Spalte - und der Spalten-Div hat nen overflow:hidden.

[mv_alex]

Das will ich alles nicht abstreiten - ich habe das Template nicht gebaut und bin noch nicht komplett in die Struktur eingestiegen. Aber es hat ja seltsamerweise bisher immer funktioniert, und ich habe zuletzt nichts daran geändert.

Hier ein temporärer Link zur Seite.

Gruß Alex

[bizon]

Kleine Änderung im CSS ist nötig:

ul.cloud li {display:inline;}

ändern in

ul.cloud li {display:inline-block;}

dann sollte es wieder passen.

[MacGyer]

Moinsen,


sieh mal den Screenshot, im Chrome mit Developer Tools analysiert:

tagcloud.PNG


Grüßn

[mv_alex]

Hi,

"inline-block" zu verwenden, löst das Problem nur zum Teil.

Zwar werden nun wieder alle Listenpunkte innerhalb des divs dargestellt, aber die "Blocksatz-Optik" wie bisher fehlt.

Ich kann mir echt immer noch nicht erklären, wo das ganze Problem auf einmal her kommt ...

Gruß Alex

[bizon]

Tagcloud benötigt Mootools! Ist das im Seitenlayout aktiviert?
Im Quelltext kann ich Mootools nicht entdecken.

[mv_alex]

War es tatsächlich nicht - im Composer ist mir diese Abhängigkeit gar nicht aufgefallen.

Habe es jetzt eingebunden - verändert hat sich allerdings nichts.

Gruß Alex

[bizon]

Beide Frameworks zu laden, sorgt oft für etwas Mehrarbeit.

Mootools muss vor jQuery geladen werden und jQuery Skripte müssen eindeutig als solche maskiert werden. Stichwort ist jQuery-noConflict, da wirst du dich Einlesen müssen.

[mv_alex]

Setzt Contao 3 den noConflict-Modus nicht automatisch? Ich habe jedenfalls im Seitenlayout keine Möglichkeit gefunden, die Reihenfolge der Bibliotheken zu beeinflussen oder wie unter 2.11.X ein moo_jquery_nc einzubinden.

Testweise hab ich jquery mal aus dem Layout rausgenommen, aber geändert hat sich auch nichts.

Gruß Alex

[savuti]

Hallo,

ich krame mal das Thema wieder raus. Ich habe das gleiche Problem. Die inline-block löst zwar das Problem der nicht sichtbaren Teile der Cloud, aber nicht diese "Blocksatz"-Geschichte.

Ich habe das mit und ohne Mootools probiert und sehe da keine Veränderung. Ein Blick in die "tagcloud.js" offenbart, dass da sowohl jQuery als auch Mootools angesprochen werden. Leider funktioniert jQuery aber auch nicht.

Gibt es da eine Lösung?


Grüße,
Christian

[mv_alex]

Ich wäre auch sehr an einer Lösung interessiert - bis jetzt habe ich den Blocksatz nicht in den Griff bekommen.

Gruß Alex

[Spooky]

Beide Frameworks zu laden, sorgt oft für etwas Mehrarbeit.

Mootools muss vor jQuery geladen werden und jQuery Skripte müssen eindeutig als solche maskiert werden. Stichwort ist jQuery-noConflict, da wirst du dich Einlesen müssen.

Beides ist nicht notwendig. Das entsprechende JavaScript muss einfach korrekt geschrieben werden, damit es nicht in Konflikt kommt. tagcloud.js der Tags Extension liefert korrekten Code für jQuery und MooTools, soweit ich das sehe.

Gibt es da eine Lösung?

Ich wäre auch sehr an einer Lösung interessiert - bis jetzt habe ich den Blocksatz nicht in den Griff bekommen.

Eine Lösung wofür nun genau? Ohne Link zur Seite wird man nur begrenzt helfen können.

[savuti]

Hallo Spooky,

danke für deine Antwort. Im Moment ist das noch eine Baustellen-Seite. Zu finden unter dev.polises.de. Die Cloud ist in der rechten Marginalspalte unter dem blauen "Blog"-Bereich.

Viele Grüße,
Christian

[Spooky]

Damit sollte es gehen:

ul.cloud::after {
    content:" ";
    display:inline-block;
    width:100%;
    height:0;
} 

http://jsfiddle.net/evpmextp/

[tab]

Hmm, da wird aber "summer school" und "social networks" auseinander gerissen. Sind solche tags eigentlich zulässig?

[savuti]

Leider nein. Das würde die letzte Zeile auch auf justify zwingen. Aber schon die erste Zeile zickt da rum. Ich habe jetzt mal auf deine Variante angepasst. Leider wird jetzt hier die erste Zeile so lang, dass es über den Rand schießt. Und der Blocksatz geht nicht. Magst du nochmal schauen?

Ich habe das mal mit geschützten Leerzeichen (social[nbsp]networks) probiert, das müsste doch eigentlich gehen, oder?

Das Verrückte: Auf http://www.contao-anleitungen.de/blog.html?page_n1=2 ist genau die gleiche Ausgabe, aber da funktioniert es.

[tab]

Hmm, verrückte(?) Idee. Bei der einen (nicht funktionierenden) Seite ist der Seitenquelltext komprimiert, bei der anderen nicht. Das Komprimieren führt u.a. dazu, dass zwischen den li's kein Leerzeichen (oder Zeilenumbruch) mehr steht. Vielleicht liegt es daran.

[savuti]

Bingo!!!

Darauf wäre ich nie gekommen! Danke dir! Zwar doof, dass es nur ohne Komprimierung geht, aber damit kann ich erstmal leben. Hauptsache der Fehler ist gefunden!

[tab]

Eventuell klappt es ja auch, wenn du mit

ul.cloud li::after {
  content: " ";
}

da ein Leerzeichen dazwischen machst.

[savuti]

Die Idee hatte ich auch gerade. Mensch, Mensch, Mensch du hast heute eindeutig die Medaille gewonnen! Klappt jetzt alles bestens. Ich habe das after hinter der ul wieder weggemacht, sonst zerreißt es mir die Worte doch zu sehr.

Vielen Dank und viele Grüße,
Christian

[Spooky]

Das würde die letzte Zeile auch auf justify zwingen.

Oh, ich dachte darum geht es hier.

[mv_alex]

Hallo zusammen,

bei mir (Link) greifen diese Änderungen leider nicht. Ich seh aber nicht, was ich anders gemacht hätte.

Gruß Alex

[savuti]

Moin,

bei "ul.cloud li" "float:left" raus und "display" auf "inline" anstatt auf "inline-block". Dann funktioniert es.

ul.cloud li {
  display: inline;
  margin: 0;
  padding: 0;
}

Grüße

[mv_alex]

Danke! Das ist schon fast perfekt!

Allerdings rücken umgebrochene Zeilen nach links über den div-Rand; und nicht alle Zeilen werden mit Blocksatz gefüllt, obwohl die Tags von der Breite her in eine Zeile passen sollten.

So weit ich mich erinnere, war das "früher" nicht - kriegt man das auch in den Griff?

Gruß Alex

[savuti]

Da ist wohl "Neuss-Grevenbroicher Zeitung" einfach zu breit. Selbst wenn du das padding bei "ul.cloud li a" entfernst, reicht der Platz nicht aus. Entweder kürzere Tags verwenden oder "#left" mehr Breite geben (hast da eh nach links 50px padding?) oder halt die Schriftgrößen anpassen.

[mv_alex]

Da werd ich wohl noch ein wenig rumprobieren ...

Vielen Dank für Deine/Eure Hilfe!

Gruß Alex