Symbol verstecken... geht nicht

moonsorrox · 22 März 2018, 01:17:50

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

Code Auswählen

<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

Code Auswählen

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

kleineslichtHH · 22 März 2018, 09:02:17

mMn funktionier das nur mit dem "classchanger", such mal da nach

setstate · 22 März 2018, 09:54:28

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

moonsorrox · 22 März 2018, 13:42:58

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

Code Auswählen

<!-- ====== 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.

Code Auswählen

<!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>

setstate · 22 März 2018, 14:32:33

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.

moonsorrox · 22 März 2018, 15:07:27

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

Code Auswählen

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

setstate · 22 März 2018, 15:30:33

Ich habe auch nix von Classchanger geschrieben. Ich meine schon die Variante mit data-hide-on aus deinem ersten Post.

moonsorrox · 22 März 2018, 17:11:56

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:

Code Auswählen

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