Anzeige im Firefox richtig auf dem Tablet abgeschnitten

[moonsorrox]

Ich hab leider noch nicht ganz verstanden, wie dass dann schlussendlich ausschauen soll. Könntest du das vielleicht mal irgendwie zeichnen bitte?

Aber na klar, ich zeige es mal am Screenshot auf dem FF59 

Aber nochmal ein Erklärung dazu.
1. hatte mir das auf dem Tablet in der mittleren Box immer alles verschoben so das rechts nichts zu sehen war, dass funktioniert jetzt
2. konnte ich kein Bild als Hintergrund einsetzen, da waren immer die schwarzen <div> Container zu sehen und auch die vbox und die hbox war davor es waren eigentlich nur die Bildränder zu sehen, dass funktioniert jetzt auch

Was immer noch nicht geht, ist das die Abstände nicht stimmen im FF, im Chrome und auf dem Android Tablet (hier am schlimmsten)
Da hatte ich von setstate schon das mit dem "classchanger" benutzt so das er alles was nicht aktiv ist ausblendet

Das Bild ist jetzt mal nur irgend eines welches ich hier eingesetzt habe, trotzdem ist alles gut zu sehen
1. Screenshot Firefox
2. Screenshot Android Tablet

In Original ist das auf dem Android Tablet besser zu sehen, dass Bild macht es etwas schlechter


code:

Code Auswählen Erweitern

    <div class="page" id="flur_content3">
        <div class="gridster">
<ul><!-- ANFANG - 1. Block links -->
<li data-row="5" data-col="1" data-sizex="5" data-sizey="16">
<div class="vbox bg-black">
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
</div>
</li>
<!-- ENDE - 1. Block links -->

<!-- ANFANG - 2. Block mitte -->
<li class="" data-row="5" data-col="6" data-sizex="6" data-sizey="16">
<div id="background2" class="vbox bg-black">
<div class="card" style="margin-top:0px; margin-left:20px; width:97%; height:95%; line-height:1.75em; align:center">
<div class="vbox">
<!-- ANFANG - mein Code -->
<!-- Status der Geräte -->
<!-- ==== Türkontakt - Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_TK_Terrasse" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Terrassen Tür</div>
</div>
</div>
<div class="hbox">
<div style="margin-top:0px; text-align:right; font-size:150%"
data-type="label"
data-hide-on="closed"
data-device="WZ_TK_Terrasse"
data-get="state"
data-substitution='["open","Offen","closed","Geschlossen"]'
data-classes='["crimson","lightgreen"]'
data-limits='[open,closed]'>
</div>
</div>
</div>

<!-- ========== Garagentor ========== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Garagentorsensor" data-get="state" data-get-on="open" data-off-class="hide">
<div style="font-size:150%" data-type="label">Garagen Tor</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="closed"
data-device="Garagentorsensor"
data-get="state"
data-substitution='["open","Offen","closed","Geschlossen"]'
data-classes='["lightgreen","crimson"]'
data-limits='[open,closed]'>
</div>
</div>
</div>

<!-- ==== Rollladen - Wohnzimmer links ==== -->
<div class="hbox">
<div class="card grow-2 ">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Links</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="WZ_Rollladen_O"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>

<!-- ==== Rollladen - Wohnzimmer rechts ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Rechts</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="RollladenWZ"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>

<!-- ==== Rollladen - WZ - Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Terrasse</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="RollladenWZT"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>

<!-- ==== Rollladen - Schlafzimmer ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Schlafzimmer</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-device="RollladenSZ"
data-get="level"
data-map-get='{"0":"Geschlossen","25":"Beschattung 25%","50":"Beschattung 50%","75":"Home 75%","100":"Oben - Offen"}'
data-limits='[0,25,50,75,100]'
data-colors='["crimson","#00bfff","darkorange","royalblue","lightgreen"]'>
</div>
</div>
</div>

<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WegLampe_Sw_01" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Weg vorn & Schuppen</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_01"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Beleuchtung Weg hinten ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WegLampe_Sw_02" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Weg hinten</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_02"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Beleuchtung Garten ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="AU_Garten" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Garten</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="AU_Garten"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[ON,OFF]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Licht Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtTerrasse" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Terrasse</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtTerrasse"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== LED TV - Lampe ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_Lampe_TV" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">LED TV - Lampe</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WZ_Lampe_TV"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["white","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== LED Schrank und Vitrine ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_Schrank" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">LED Schrank & Vitrine</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="WZ_Schrank"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["white","crimson"]'
data-limits='[ON,OFF]'>
</div>
</div>
</div>

<!-- ==== 3x LED Eingang ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="AussenLampe" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">3x LED Eingang</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="AussenLampe"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Licht - OG ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="OG_Licht_Buero" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung OG Büro</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="OG_Licht_Buero"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Tablet Flur Ladestation ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="di_Ladestation_FlurOben" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Tablet Flur Oben</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="di_Ladestation_FlurOben"
data-get="state"
data-substitution='["on","Wird geladen","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Tablet Küche Ladestation ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="di_Ladestation_Kueche" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Tablet Küche</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="di_Ladestation_Kueche"
data-get="state"
data-substitution='["on","Wird geladen","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
 
<!-- ==== Schlafzimmer Uhr ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Uhrzeit" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Schlafzimmer Uhr</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Uhrzeit"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
   
<!-- ====== Türklingel ====== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Türklingel</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Klingel"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
   
<!-- ==== Gardena Pumpe ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="GardenaPumpe" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Gardena Pumpe</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="GardenaPumpe"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Licht Garage ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtGarage" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Garage</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtGarage"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
   
<!-- ==== Licht Schlafzimmer ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtSZ" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Schlafzimmer</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtSZ"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Netzwerkdrucker Büro ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="BU_Sonoff_1" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Netzwerkdrucker Büro</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="BU_Sonoff_1"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Proxmox Server ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="BU_Sonoff_2" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">Proxmox Server</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="BU_Sonoff_2"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[ON,OFF]'
data-refresh="1">
</div>
</div>
</div>


<!-- ==== Licht Weihnachten Busch ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtEG" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Licht Weihnachten Busch</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtEG"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>


<!-- ENDE - mein Code -->
</div>
</div>
<!--div class="card"><div ></div></div>
<div class="card"><div ></div></div-->
<div class="card"><div ></div></div>
</div>
</li>
<!-- ENDE - 2. Block mitte -->

<!-- ANFANG - 3. Block rechts -->
<li data-row="5" data-col="12" data-sizex="5" data-sizey="16">
<div class="vbox bg-black">
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
</div>
</li>
<!-- ENDE - 3. Block rechts -->
</ul>
</div>
</div>

[moonsorrox]

Nun wollte ich nach einem Update mal schauen ob sich etwas verändert, ja es hat sich was verändert 
Die Anzeigen für den Status der Geräte die ich in "Rot" hatte sind jetzt alle "weiß" ist da was schief gelaufen

Als Beispiel hier mal ein div, bei mir ist es die Farbe "crimson"

Code Auswählen Erweitern

<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Uhrzeit"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>

[setstate]

Müsste "lightgreen","crimson" nicht als data-colors definiert sein? Oder in deinem User-CSS File müsste .lightgreen  und .crimson angelegt sein.

[moonsorrox]

bisher ging es alles so... deshalb habe ich mir keine Gedanken darüber gemacht, ist mir nur eben gestern aufgefallen
Ja ich habe diese Farben schon immer in der *.css definiert, ich schaue mal

[moonsorrox]

also es liegt nicht an meinen Farben...! die sind drin in der css

Wie muss ich denn nun ein Label erstellen damit es wieder so funktioniert wie gestern vor dem Update, das wenn data-device auf on oder off steht es auch die Farbe wechselt 

Auf jeden Fall ging das gestern vor dem Update ohne Probleme 

[setstate]

Mit !important ?

Code Auswählen Erweitern


.lightgreen {
  color: #33ff55 !important; 
}


[moonsorrox]

Nein, dass meine ich nicht...!
Es funktioniert egal mit welcher Farbe nicht mehr... So wie meine Label Definition von oben, damit geht das nicht mehr wenn ich mit on, off arbeiten will...

[setstate]

Und ich meinte, nur wenn die Farbendefinition so aussieht (mit important), funktioniert es.