Checkbox fehlt

[Preetz]

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

[Stefko]

Ahoi,

also mit

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

anstatt

[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 ;-)

[planepix]

Hallo Preetz,

im CSS sind die „unsichtbar” gesetzt:

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

[fiedsch]

aus dem Theme kommt

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

Wenn Du das zu (in Deinem CSS) mit

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

überschreibst, sind sie wieder da.

Edit: Thomas war schneller.

[Preetz]

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?

[xchs]

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).

[Preetz]

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?

[xchs]

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

[Preetz]

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?

[xchs]

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.

[Preetz]

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

[xchs]

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

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

vs

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

[Preetz]

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.

[xchs]

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

[Preetz]

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

[xchs]

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

[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%;
}

[xchs]

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

[Preetz]

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

hat sich was getan ...

[xchs]

So eventuell:

[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);
}

[Preetz]

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.

[xchs]

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.

[Preetz]

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

[xchs]

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