Kleines Problem mit JEM Kalender Modul

Kurtus · 26. April 2018

Hallo zusammen,

ich habe dieses Problem vor einigen Tagen im JEM Forum gepostet, bekam dort aber bisher keine Antwort.

Vielleicht hat jemand von Euch eine Lösung für mich.

Sobald ein Event im Joomla Event Manager eingetragen wurde, wird das dazugehörigen Datum (Tag) im Kalender farblich hinterlegt. Wenn man nun mit dem Mauszeiger über dieses Datum fährt erscheint ein Tooltip mit der Anzahl und den Namen der Events, welche an diesem Tag stattfinden.

Dies funktioniert auch soweit. Allerdings wird bei mir die Spalte, in welcher sich dieser Tag befindet beim Überfahren dieses Datum plötzlich breiter.

Dies sieht nicht sehr schön aus.

Anbei zwei Screenshot:

1. Kaleneder im "Normalzustand",

2. Kalender sobald eines Datum mit eingetragen Termin mit dem Mauszeiger überfahren wird (Spalte wird breiter)

Live Ansicht: http://test.mcv-moemlingen.net/

Danke für jede Hilfe

Kurt

HorstG · 26. April 2018

Hab es gerade mal versucht anzusehen, konnte das verhalten aber nur einmal produzieren, einmal angeklickt kommt es nicht mehr.

Es muss aber defintiv etwas mit der hover Auszeichnung des Links zu tun haben.

Schau mal hier

http://test.mcv-moemlingen.net…d_jem_cal/mod_jem_cal.css

in dem Block

Code

/* Today Event day cell hover */
.eventcalq td.mod_jemcalq_caltodaylink a:hover {
    text-decoration: none;
/*    width: 19px;
    height: 18px; */
    font-weight: bold;
    display: block;
    color: #FFFFFF;
    background-color: #0066FF;
    border: 2px solid #DF9496;
}

Alles anzeigen

und ändere es in

Code

/* Today Event day cell hover */
.eventcalq td.mod_jemcalq_caltodaylink a:hover {
    text-decoration: none;
    width: 19px;
    height: 18px; */
    font-weight: bold;
    display: block;
    color: #FFFFFF;
    background-color: #0066FF;
    border: 2px solid #DF9496;
}

Alles anzeigen

Desweiteren ändere bitte das Startbild in einen Bildeditor auf die richtige Größe. Kein Mensch brauch ein 3MB großes Bild dass von über 4000 Pixel auf die korrekte Größe skaliert wird. Einfach in der richtigen Größe abspeichern

Kurtus · 26. April 2018

Hallo Horst,

danke für Deine Antwort.

Mit dem Startbild hast Du natürlich recht, das war auch nur ein Platzhalter, da ja die Seite noch nicht veröffentlicht wurde und nur Insider da hin kommen.

Ich habe es trotzdem mal getauscht.

Bevor ich die von Dir vorgeschlagenen Änderungen vornehme, hatte ich es auch noch einmal probiert und plötzlich dieses Ergebnis mit einem breiten Tooltip erhalten:

Wie gesagt, ohne Änderung erschien das plötzlich so. Ich bin dann mal auf einen anderen Termin im September gegangen, Hier war es wieder wie vorher beschrieben (mit der breiten Spalte). Nach dem Zurückwechseln auf den Mai Termin kam dann auch dort wieder die breite Spalte...

Richtig wäre der kleine Tooltip bei gleichbleibender Spalte.

Ich werde mal Deine Änderung einbauen und sehen was passiert.

Gruß

Kurt

Kurtus · 26. April 2018

Hallo Horst,

ich habe mal die Auskommentierng von

Code

    width: 19px;

entfernt. Trotzdem bleibt das Problem erhalten.

Gruß

Kurt

Elfangor93 · 26. April 2018

Es scheint so, als ob das div mit dem Tooltip an falscher Stelle im DOM platziert wird:

das div wird auf deiner Seite innerhalb der Tabelle platziert...

auf der Demo-Seite von JEM (https://www.joomlaeventmanager.net/demo/) wird das div jedoch am Ende platziert.

Die falsche Platzierung bewirkt das spreizen der Tabelle. So wie ich es sehe, wird das div per jQuery (wahrscheindlich asynchron AJAX) eingefügt. Warum es in deinem Fall an falscher Stelle eingefügt wird, kann ich nicht sagen.

Ich vermute es ist ein Problem in Zusammenhang mit deinem Template. Hast du mal ein anderes Template probiert (z.B Protostar)?

Ich hoffe, ich konnte dich auf den richtigen Weg weisen

Lg

Kurtus · 26. April 2018

Hi 19leunam93,

danke Dir für den Hinweis.

Am Template liegt es nicht.

Ich habe herausgefunden, dass es irgenwie mit diesem code zusammenhängt, den ich aus diesem Beitrag 5467-buttons-die-in-mormalem-html-zu-sehen-sind-verschwinden-in-joomla in meiner cusom.css eingetragen habe:

Code

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  opacity: 1;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
    width: 150px;
    background-color: #ffff00;
    color: #000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 100%;
    margin-left: -60px;

    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -41px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #ffff00 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  font-size:1.4em;
}
span.tooltiptext a {
  color:#000;    
  }

Alles anzeigen

Irgend etwas verträgt sich nicht. Da ich aber kein Experte bin, weiß ich nicht, was genau ich umstellen muss.

Ich werde dies auch mal in dem genannten Thread fragen.

Gruß

Kurt

Elfangor93 · 27. April 2018

Hallo,

Es liegt sogar bloss an dieser einen css-Regel in deinem custom.css:

Wenn du die auskommentierst, erscheint der Tooltip von JEM korrekt. Das div wird zwar immernoch an falscher Stelle eingefügt, mit dieser css Korrektur erscheint es aber trotzdem korrekt

Falls das deaktivieren dieser css-Regel dem Verhalten deines eigenen Tooltips aus Beitrag 5467 nicht zugute kommt, musst du die css-Klasse deines eigenen Tooltips umbenennen. z.B

Code

<div class="mein-tooltip">Hover over me
  <span class="mein-tooltiptext">Tooltip text</span>
</div>

Natürlich müssen dann auch die Selektoren im css angepasst werde.

So werden jedoch deine Tooltip-css-Regeln diejenigen von anderen Erweiterungen nicht mehr beeinflussen.

Ich hoffe das bringt was!

Lg

Kurtus · 27. April 2018

Hallo 19leunam93

tausend Dank für Deine sehr hilfreiche Detektivarbeit.

Ich habe den HTML-Code und die dazugehörigen CSS-Selektoren geändert und alles funktioniert prima!

Nochmals vielen Dank

LG

Kurt

Tags