Checkbox fehlt

Hallo zusammen,

ich benötige einmal Eure Hilfe. Auf meiner Webseite sind nach einem Update die Checkboxen verschwunden.
Ich kriege diese mit meinem bisschen CSS Kenntnissen leider nicht mehr angezeigt.

https://tt-spindoctor.de/login-als-kunde.html

Habe ihr nen Tipp für mich?

Vielen Dank im Voraus,
Preetz

Ahoi,

also mit

Code:

---

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: relative;
    opacity: 1;
    pointer-events: none;
}

---

anstatt

Code:

---

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

---

ist sie wieder sichtbar, aber ob dies an anderen Stellen evtl. wieder ungewünschte Auswirkungen hat, musst Du selbst testen ;-)

Hallo Preetz,

im CSS sind die „unsichtbar” gesetzt:

Code:

---

[type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; opacity: 0;}

---

aus dem Theme kommt

Code:

---

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

---

Wenn Du das zu (in Deinem CSS) mit

Code:

---

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: relative;
  opacity: 1;
}

---

überschreibst, sind sie wieder da.

Edit: Thomas war schneller.

Vielen Dank an Euch.

Jetzt die die Checkbox wieder da. Allerdings lässt diese sich noch nicht anklicken.
Aber irgendwie ja schon merkwürdig, dass sich das CSS so verändert oder?

Grundsätzlich war es schon richtig, so wie es ursprünglich war. Dein Theme stylt diese Formularelemente eben etwas anders (siehe z. B. https://mate.pdir.de/module/formulare.html).

Ich habe jetzt mal das "Beispielformular" auf diese Seite eingefügt: https://tt-spindoctor.de/login-als-kunde.html
Da habe ich das Problem selbst nicht. Lediglich bei allen anderen Formularformen in Modulen.

Hilft es eventuell bei der Fehlersuche?

Verwendest Du die aktuellste Version des Themes (insbesondere Materialize Framework)?

Ja die ist aktuell. Ich habe das hier gefunden:
https://docs.contao-themes.net/#/mat...te-version-2.0

Kann damit aber nicht so viel anfangen.

Wie umfangreich wäre es, wenn ich das Theme einfach kille und neu installieren würde?

In Deinem Stylesheet kann ich jedenfalls nirgends die Stylings der Pseudoelemente (z. B. [type="checkbox"]+label:before etc.) finden, welche die Formatierung der Checkboxen notwendig wären.

Aber warum funktioniert es dann beim Formular, nicht aber bei anderen Seiten die Module einbinden?

Dort funktioniert es deshalb, weil das HTML-Markup ein anderes ist.

HTML-Code:

---

<span>
  <input>
  <label></label>
</span>

---

vs

HTML-Code:

---

<label>
    <input>
    <span></span>
</label>

---

Ich habe mal eine neue Installation aufgesetzt.
Scheinbar ist es ein Bug:
http://2020.tt-spindoctor.de/module/user.html

Komplett sauber installiert Contao und das Theme. Keine Anpassungen vorgenommen.

Immer noch das selbe Problem.

Scheint wohl tatsächlich aktuell so zu sein. Gerade eben getestet und kann das ebenfalls mit Version 2.3.4 des Bundles bestätigen.

Wie kann ich das melden? Und vor allem, wie melde ich, dass die Mädels und Jungs wissen, was wir da entdeckt haben?

Ergänze mal in Deiner custom.scss die folgenden Styles:

Code:

---

[type="checkbox"]+label:before,
[type="checkbox"]:not(.filled-in)+label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border-radius: 1px;
    border: 2px solid #d1b155;
    margin-top: 2px;
    transition: 0.2s;
}

[type="checkbox"]:checked+label:before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #d1b155;
    border-bottom: 2px solid #d1b155;
    transform: rotate(40deg);
    backface-visibility: hidden;
    transform-origin: 100% 100%;
}

---

Zitat:

---

Zitat von Preetz

Wie kann ich das melden? Und vor allem, wie melde ich, dass die Mädels und Jungs wissen, was wir da entdeckt haben?

---

Das müsstest Du hier melden: https://github.com/contao-themes-net...-bundle/issues

Habe es mal in meine eigene CSS genommen:
https://tt-spindoctor.de/login-als-kunde.html

hat sich was getan ...

So eventuell:

Code:

---

[type="checkbox"]+label:before,
[type="checkbox"]:not(.filled-in)+label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border-radius: 1px;
    border: 2px solid #d1b155;
    margin-top: 2px;
    transition: 0.2s;
}

[type="checkbox"]:checked+label:before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #d1b155;
    border-bottom: 2px solid #d1b155;
    transform: rotate(40deg);
    backface-visibility: hidden;
    transform-origin: 100% 100%;
}

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

[type="checkbox"]+label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    user-select: none;
}

[type="checkbox"]+label:before,
[type="checkbox"]:not(.filled-in)+label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #d1b155;
    border-radius: 1px;
    margin-top: 2px;
    transition: 0.2s;
}

[type="checkbox"]:not(.filled-in)+label:after {
    border: 0;
    transform: scale(0);
}

[type="checkbox"]:not(:checked):disabled+label:before {
    border: none;
    background-color: rgba(0, 0, 0, 0.42);
}

---

Danke aber ich glaube da hat sich nix verändert.

Die Checkbox hängt noch oben links, funktioniert aber technisch gesehen.
Habe aber auch festgestellt, dass die Select-Felder auch ne Macke haben. Die sind wohl in der Höhe fix, lassen sich nicht scrollen.

Habe die Styles nur vorhin schnell eingefügt: Bei mir tat sich dann schon etwas (siehe https://webm.red/view/ns6f.webm). Naja, egal: Erstelle dazu einfach ein Ticket und beschreibe kurz, worum es geht und wie sich das Problem reproduzieren lässt.

Vielen Dank noch mal für deine Mühe. Das Video kann ich allerdings jetzt nicht starten.

Das Video ist auch nicht wichtig. Es zeigt nur, wie ich die Checkbox anklicke. Mehr nicht. Da gibt es bestimmt Sehenswerteres :)