Leute ich bekomme ums verrecken nicht zwei Symbole zu verstecken... Das Symbol ändert zwar die Farbe, aber es bleibt im off Zustand stehen
Wobei ich meine das mein Symbol für Frost bei Proplanta letztens noch funktioniert hat.
Alle möglichen Varianten habe ich gemacht, es bleibt einfach stehen. Was übersehe ich..?
<div class="cell center" data-type="symbol" data-device="Klingel" data-get="state" data-hide="state" data-hide-on="on" data-hide-off="!on" data-on-color='crimson' data-icon="fs-ring" style="display:inline; font-size:175%; margin-left:-10px;">
</div>
mein Frost Icon ebenso
<div class="cell center" data-type="symbol" data-device="Proplanta" data-get="fc0_frost" data-hide-on="0" data-get-off='0' data-get-on='1' data-off-color='transparent' data-on-color='#9999ff' data-icon="fs-frost" style="display:inline; font-size:175%; margin-left:-10px;">
</div>
mMn funktionier das nur mit dem "classchanger", such mal da nach
Grundsätzlich funktioniert das so, aber ...
Hide setzt "display: none", um das Element zu verstecken.
Bei dir wird das Wirken dieser Property aber verhindert, weil du an zwei anderen Stellen "display" setzt, was das andere "display" übertrumpft.
1. im HTML das style="display:inline; ....
2. class="center" bringt ein "display: flex !important;" mit
Beides ist stärker als das "display: none" entsprechend den bekannten Reihenfolge der Spezifität bei CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://developer.mozilla.org/de/docs/Web/CSS/Spezifität
Wie der Text beschreibt, muss ich versuchen das !important zu vermeiden und die Spezifität besser ausnutzen, um das Richtige anzuziehen
Erkenntnis:
-1: vermeide das Benutzen der inline-Styles (Style Tag direkt im HTML) "style='....' "
-2: beim der .center Definition im CSS nehme ich mal das !important weg
-3: die .hide Definition verschiebe ich innerhalb der CSS nach unten (> 3000)
Mal sehen, wo das woanders wieder einschlägt ...
ich verstecke ja an anderer Stelle das Gerät und weiteren Text mit dem classchanger und da funktioniert das auch..!
Aber in meiner ich sage mal footerleiste ist nur das Symbol zu sehen da funktioniert es gar nicht.
Ich habe jetzt auch die inline Sachen raus genommen :-\ ich verstehe nichts mehr, an einer Stelle geht es an anderer nicht.
Jetzt werden gar keine Icons mehr angezeigt, obwohl die Klingel an ist.
Hier mal auf meiner Seite das classchanger
<!-- ====== Türklingel ====== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Türklingel - EIN</div></div></div>
<div class="card"><div></div>
<div class="right-align" data-type="symbol" data-device="Klingel" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="fs-ring"></div></div>
</div>
</div>
das funktioniert
An anderer Stelle funktioniert das eben nicht..! :-\ bin da jetzt etwas ratlos, weil so schwer ist es doch gar nicht..!!
Das hier funktioniert gar nicht:
hier mal der gesamte Code des Templates wo sich die Klingel in der Leiste bei mir ganz unten sitzt und auch das Frost Icon welches ja jetzt weg sein sollte und auch das funktioniert nicht.
<!DOCTYPE html>
<html>
<head>
<!-- Template für Türklingel -->
</head>
<body>
<div class="cell center" style="font-size:175%; margin-left:-10px;"
data-type="classchanger"
data-device="Klingel"
data-get="state"
data-get-on="on"
data-off-class="hide"
data-on-color='crimson'
data-icon="fs-ring">
</div>
</body>
</html>
Wenn du die drei Punkte unter "Erkenntnis" von mir befolgst, geht zumindest die data-hide Funktionalität.
Es kann aber passieren, dass es dann an anderer Stelle kracht.
CSS ist eine Wissenschaft für sich und man bekommt viele graue Haare davon.
In den Developertools sieht man aber sehr gut, welche Regeln angezogen werden. Die nicht wirksamen Vorgaben sind dann durchgestrichen.
ich denke ich habe das gemacht
Zitatzu 1. vermeide das Benutzen der inline-Styles (Style Tag direkt im HTML) "style='....' "
habe ich raus genommen
Zitat-2: beim der .center Definition im CSS nehme ich mal das !important weg
da kann ich ja nichts machen, habe ich in meiner Definition auch nicht drin... mein center ist raus
Zitat-3: die .hide Definition verschiebe ich innerhalb der CSS nach unten (> 3000)
habe ich ganz am Ende
hier mein bereinigter Code
<div data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div data-type="symbol" data-device="Klingel" data-get="state" data-on-color="crimson"
data-get-on="on" data-icon="fs-ring"></div>
</div>
oder verstehe ich da jetzt etwas nicht..?
So funktioniert es erst einmal... aber es sollte doch auch mit nur einem <div> gehen, oder..?
Ich habe auch nix von Classchanger geschrieben. Ich meine schon die Variante mit data-hide-on aus deinem ersten Post.
Ja, ist schon klar aber ich wusste mir nicht anders zu helfen..! :)
Wobei in meinem Fall, nur das class="center" raus mußte, damit geht es nicht... da muss man erst einmal drauf kommen
So geht es jetzt auch:
<div class="cell" style="font-size:175%; margin-left:-10px;" data-type="symbol" data-device="Klingel" data-get="state" data-hide="state" data-hide-on="off" data-hide-off="!on" data-on-color='crimson' data-icon="fs-ring">
</div>