label aktualisiert sich nicht

[yersinia]

Vieles an deinem Code ist teilweise wirr. Ich denke, die vbox nutzt du um das Türöffner-Widget unter die Müllabfuhr zu platzieren. Von daher ist es ok, wenn es nicht geschlossen wird - Codefragment halt.
Aber das ist interessant:

Code Auswählen Erweitern

<div class="bigger bottom-narrow"
            data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
            </div>
            <div class="top-space" >
                 <div data-type="label"
         data-part="(.*)_.*"
     data-device="Google_Abfallkalender"
     data-get="nextWaste"
     class="top-narrow" >
                 </div>
                 </div>
bottom-narrow gefolgt von top-space gefolgt von einem top-narrow ist irgendwie Sinnfrei imho. Generell hast du auch viele div-Container drin, die man mMn ersetzen könnte - indem man die class Definition in dem label selbst setzt.
Hier ein alternativer Vorschlag, der allerdings ungetestet ist. Wenns läuft und du zufrieden bist, dann lass es, wie es ist.

Code Auswählen Erweitern

<div data-type="popup" data-height="150px" data-width="250px" data-return-time="60">
       <div> <!-- popuplink -->
            <div class="bigger bottom-narrow"
                data-device="Google_Abfallkalender"
    data-type="symbol"
    data-get="nextWaste"
    data-get-warn=".*(\d+).*"
    data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
    data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
    data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'></div>                 
            <div data-type="label"
         data-part="(.*)_.*"
     data-device="Google_Abfallkalender"
     data-get="nextWaste"
     class=""></div>
       </div> <!-- /popuplink -->
       <div class="dialog">
       <header>Leerungen</header>
                <div class="vbox center-align">
                    <div class="hbox center-align items-top top-space">
                      <div class="bold">Restabfall/Wertstoffe</div>
                  <div data-type="label"
                                data-device="Google_Abfallkalender"
                                data-get="L_Restabfall/Wertstoffe"
                                class=""></div>
                    </div> <!-- /hbox -->
            <div class="hbox center-align items-top top-narrow">
              <div class="bold">Bioabfall</div>
              <div data-type="label"
                                data-device="Google_Abfallkalender"
                                data-get="L_Bioabfall"
                                class="top-narrow"></div>
                    </div> <!-- /hbox -->
                    <div class="hbox center-align items-top top-space">
                  <div data-type="push"
                  data-device="doif_Muell_Count"
                      data-set-on="cmd_2"
                  data-on-color="white"
                  data-on-background-color="green"
                  data-icon="fa-chevron-down"></div>
                  <div data-type="push"
                  data-device="doif_Muell_Count"
                  data-set-on="cmd_1"
                  data-on-color="white"
                  data-on-background-color="green"
                  data-icon="fa-chevron-up"></div>
                    </div> <!-- /hbox -->
                </div> <!-- /vbox -->
        </div><!-- /dialog -->
    </div> <!-- /popup -->
Was ich immer gerne nutze sind die WebDeveloper Funktionen des Firefox, insbesondere die "Element untersuchen (Q)" Funktion - gibt gute aufschlüsse, wie sich eine HTML Element verteilt.

[TomLee]

Vieles an deinem Code ist teilweise wirr. Ich denke, die vbox nutzt du um das Türöffner-Widget unter die Müllabfuhr zu platzieren. Von daher ist es ok, wenn es nicht geschlossen wird - Codefragment halt.

Eventuell ist es nicht mehr so wirr, wenn du siehst das das keine Codefragmente sind, sondern eigene Dateien.
So hab ich halt damals angefangen und eigentlich nie wieder was geändert, weil das Interesse schwand und alles seinen Zweck erfüllt.

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>

<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="140">
<meta name="widget_base_height" content="147">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll_type" content="websocket"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name="widget_margin" content="1">

    <link rel="stylesheet" href="./lib/jquery.gridster.min.css" />
        <link rel="stylesheet" href="./css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="./lib/font-awesome.min.css" />
<link rel="stylesheet" href="./lib/openautomation.css" />
<link rel="stylesheet" href="./lib/fhemSVG.css" />
        <link rel="stylesheet" href="./lib/jquery.toast.min.css" />
        <link rel="stylesheet" href="./lib/powerange.min.css" />
       
        <script type="text/javascript" src="/fhem/www/pgm2/jquery.min.js" defer></script>
        <script type="text/javascript" src="/fhem/www/pgm2/jquery-ui.min.js" defer></script>
        <script type="text/javascript" src="./lib/jquery.knob.mod.min.js" defer></script>
        <script type="text/javascript" src="./lib/jquery.toast.min.js" defer></script>
        <script type="text/javascript" src="./lib/jquery.circlemenu.js" defer></script>
        <script type="text/javascript" src="./lib/powerange.min.js" defer></script>
        <script type="text/javascript" src="./lib/jquery.gridster.min.js" defer></script>
        <script type="text/javascript" src="./lib/fa-multi-button.min.js" defer></script>
<script type="text/javascript" src="./js/fhem-tablet-ui.js" defer></script>

</head>
<body>
<div class="gridster">
<ul>
<!-- ========= Linkes-Hauptmenü ========== -->
<!-- ====================================== -->
<li data-row="5"
data-col="1"
data-sizex="1"
data-sizey="1"
data-template="menu_pen.html">
</li>
<!-- ========= Uhr =========== -->
<!-- ====================================== -->
<li data-row="1"
data-col="3"
data-sizex="3"
data-sizey="1"
data-template="inc_uhr2.html">
</li>
<!-- ========= Termine ========== -->
<!-- ====================================== -->
<li data-row="4"
data-col="6"
data-sizex="2"
data-sizey="2"
data-template="inc_termine.html">
</li>
<!-- ========= Fritzbox =========== -->
<!-- ====================================== -->
<li data-row="3"
data-col="6"
data-sizex="2"
data-sizey="1"
data-template="inc_fritzbox.html">
</li>
<!-- ========= Haustür =========== -->
<!-- ====================================== -->
<li data-row="2"
data-col="6"
data-sizex="1"
data-sizey="1"
data-template="inc_haustuerkueche.html">
</li>
<!-- ========= Eieruhr  =========== -->
<!-- ======================================= -->
<li data-row="1"
data-col="7"
data-sizex="1"
data-sizey="1"
data-template="inc_eieruhr.html">
</li>
<!-- ============= Müllplan ============ -->
<!-- ====================================== -->
<li data-row="1"
data-col="6"
data-sizex="2"
data-sizey="2"
data-template="inc_muellabfuhr.html">
</li>
<!-- ============= Rolladensteuerung Kueche ================ -->
<!-- ====================================== -->
<li data-row="2"
data-col="7"
data-sizex="1"
data-sizey="1"
data-template="inc_rollkueche.html">
</li>
<!-- ============= Einkaufsliste ================ -->
<!-- ====================================== -->
<li data-row="5"
data-col="5"
data-sizex="1"
data-sizey="1"
data-template="inc_einkaufsliste.html">
</li>

<!-- ============= ToDo Liste ================ -->
<!-- ====================================== -->
<li data-row="5"
data-col="4"
data-sizex="1"
data-sizey="1"
data-template="inc_todoliste.html">
</li>

<!-- ============= Spritpreise ================ -->
<!-- ====================================== -->
<li data-row="2"
data-col="1"
data-sizex="1"
data-sizey="3"
data-template="inc_spritpreise.html">
</li>
<!-- ============= Fernbedienung Echo Küche ================ -->
<!-- ====================================== -->
<li data-row="5"
data-col="2"
data-sizex="2"
data-sizey="1"
data-template="inc_echo_kueche.html">
</li>
<!-- ============= Flur Temperatur ============ -->
<!-- ====================================== -->
<li data-row="1"
data-col="2"
data-sizex="1"
data-sizey="1"
data-template="inc_eg_fk_temp.html">
</li>
<!-- ============= Hof Temperatur ============ -->
<!-- ====================================== -->
<li data-row="1"
data-col="1"
data-sizex="1"
data-sizey="1"
data-template="inc_hf_temp.html">
</li>
<!-- ============= Anrufliste ============= -->
<!-- ====================================== -->

<li data-row="2" data-col="2" data-sizex="4" data-sizey="3">
    <header>Anruferliste</header>
   
    <table border="0" width="100%">
        <tr>
         <td><div data-type="label" data-device="Calllist" data-get="1-timestamp"></div></td>
            <td>
                <div data-type="label" data-device="Calllist" data-get="1-number" style="font-size:x-large;color:#aa6900;"></div>
                <div data-type="label" data-device="Calllist" data-get="1-name"></div>
            </td>
            <td class="r"><div data-type="label" data-device="Calllist" data-get="1-duration"></div></td>
            <td class="r">
            <div data-type="symbol" data-device="Calllist"
                        data-get="1-state"
                        data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div>
                   
                    <div data-type="symbol" data-device="Calllist"
                        data-get="1-state"
                        data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div></td>
        </tr>
        <tr>
         <td><div data-type="label" data-device="Calllist" data-get="2-timestamp"></div></td>
            <td>
                <div data-type="label" data-device="Calllist" data-get="2-number" style="font-size:x-large;color:#aa6900;"></div>
                <div data-type="label" data-device="Calllist" data-get="2-name"></div>
            </td>
            <td class="r"><div data-type="label" data-device="Calllist" data-get="2-duration"></div></td>
            <td class="r">
            <div data-type="symbol" data-device="Calllist"
                        data-get="2-state"
                        data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div>
                   
                    <div data-type="symbol" data-device="Calllist"
                        data-get="2-state"
                        data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div></td>
        </tr>
        <tr>
         <td><div data-type="label" data-device="Calllist" data-get="3-timestamp"></div></td>
            <td>
                <div data-type="label" data-device="Calllist" data-get="3-number" style="font-size:x-large;color:#aa6900;"></div>
                <div data-type="label" data-device="Calllist" data-get="3-name"></div>
            </td>
            <td class="r"><div data-type="label" data-device="Calllist" data-get="3-duration"></div></td>
            <td class="r">
            <div data-type="symbol" data-device="Calllist"
                        data-get="3-state"
                        data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div>
                   
                    <div data-type="symbol" data-device="Calllist"
                        data-get="3-state"
                        data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div></td>
                       
        </tr>
        <tr>
         <td><div data-type="label" data-device="Calllist" data-get="4-timestamp"></div></td>
            <td>
                <div data-type="label" data-device="Calllist" data-get="4-number" style="font-size:x-large;color:#aa6900;"></div>
                <div data-type="label" data-device="Calllist" data-get="4-name"></div>
            </td>
            <td class="r"><div data-type="label" data-device="Calllist" data-get="4-duration"></div></td>
            <td class="r">
            <div data-type="symbol" data-device="Calllist"
                        data-get="4-state"
                        data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div>
                   
                    <div data-type="symbol" data-device="Calllist"
                        data-get="4-state"
                        data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
                        data-get-on='["=>","=>","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div></td>
        </tr>
        <tr>
         <td><div data-type="label" data-device="Calllist" data-get="5-timestamp"></div></td>
            <td>
                <div data-type="label" data-device="Calllist" data-get="5-number" style="font-size:x-large;color:#aa6900;"></div>
                <div data-type="label" data-device="Calllist" data-get="5-name"></div>
            </td>
            <td class="r"><div data-type="label" data-device="Calllist" data-get="5-duration"></div></td>
            <td class="r">
            <div data-type="symbol" data-device="Calllist"
                        data-get="5-state"
                        data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
                        data-get-on='["=>","<=","=> X","[<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div>
                   
                    <div data-type="symbol" data-device="Calllist"
                        data-get="5-state"
                        data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div></td>
        </tr>
       
       
<tr>
         <td><div data-type="label" data-device="Calllist" data-get="6-timestamp"></div></td>
            <td>
                <div data-type="label" data-device="Calllist" data-get="6-number" style="font-size:x-large;color:#aa6900;"></div>
                <div data-type="label" data-device="Calllist" data-get="6-name"></div>
            </td>
            <td class="r"><div data-type="label" data-device="Calllist" data-get="6-duration"></div></td>
            <td class="r">
            <div data-type="symbol" data-device="Calllist"
                        data-get="6-state"
                        data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div>
                   
                    <div data-type="symbol" data-device="Calllist"
                        data-get="6-state"
                        data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div></td>
        </tr>
       
        <tr>
         <td><div data-type="label" data-device="Calllist" data-get="7-timestamp"></div></td>
            <td>
                <div data-type="label" data-device="Calllist" data-get="7-number" style="font-size:x-large;color:#aa6900;"></div>
                <div data-type="label" data-device="Calllist" data-get="7-name"></div>
            </td>
            <td class="r"><div data-type="label" data-device="Calllist" data-get="7-duration"></div></td>
            <td class="r">
            <div data-type="symbol" data-device="Calllist"
                        data-get="7-state"
                        data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div>
                   
                    <div data-type="symbol" data-device="Calllist"
                        data-get="7-state"
                        data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
                        data-get-on='["=>","<=","=> X","<= X"]'
                        data-on-colors='["green","green","red","red"]'
                        class="inline"></div></td>
        </tr>     
</table>
</li>
</ul>
</div>
</body>
</html>



bottom-narrow gefolgt von top-space gefolgt von einem top-narrow ist irgendwie Sinnfrei imho.

Darum ja die Frage

(aber ob das so richtig ist ?)

Das div mit dem top-space kam ja dazu und das war erstmal ne Lösung label wieder höher zu bekommen, vorher war doch alles korrekt definiert oder nicht.
Deinen Vorschlag schau ich mir später an.

Zum Verständnis mit dem"Türöffner-Widget", das einfach nur ein switch der den Status der Haustür wiedergibt und die Tür öffnen kann bei Betätigung, in der inc_haustuerkueche.html

Code Auswählen Erweitern

<header>Haustür</header>
<div class="wider">
<div data-type="switch"
data-device="MQTT2_EG_Flur_Kueche_Tuer"
data-get="POWER3"
data-states='["off","on"]'
data-icons='["ftui-door","ftui-door fa-lg"]'
data-background-icons='["fa-circle-thin","none"]'
data-colors='["green","firebrick"]'
data-background-colors='["#3D4C66","none"]'
class="bigger">
</div>
</div>

[yersinia]

So hab ich halt damals angefangen und eigentlich nie wieder was geändert, weil das Interesse schwand und alles seinen Zweck erfüllt.

Ja, deswegen sag ich ja auch: wenns läuft und du zufrieden bist, lass es wie es ist.
Der Code-Schönheit wegen tiefer eingreifen? mäh.
Allerdings dird deine vbox aus #13 nicht geschlossen. Wennd as die komplette Datei in dem Code-Tag ist, dann solltest du die schließen - wirkt sich sonst auf die ganze Seite aus. Andererseits, du benötigst die vbox hier eitl gar nicht. Was willst du vertikal geordnet darstellen?

Das div mit dem top-space kam ja dazu und das war erstmal ne Lösung label wieder höher zu bekommen, vorher war doch alles korrekt definiert oder nicht.

Das kannst du mMn auch direkt in dem label machen. Sparst du dir einen div-container in diesem Fall.

[TomLee]

Zum letzten Vorschlag:

Wenn ich im symbol div top-space entferne dann ragt das warn-icon etwas in den Header.
Mit der vbox Variante war alles perfekt ausgerichtet (siehe Bilder oben), auch wenn label mal zweizeilig ist.

Hast du dafür auch eine Lösung, aus diesem Beitrag ist übrigens die vbox-Variante entstanden (weil du oben gefragt hattest (und wieder rauseditiert) weshalb ich das so mache), meine das war doch schon alles korrekt so.

Code Auswählen Erweitern

<header>Müllabfuhr</header>
<div data-type="popup" data-height="180px" data-width="250px">
       <div> <!-- popuplink -->
            <div class="bigger top-space"
                data-device="Google_Abfallkalender"
    data-type="symbol"
    data-get="nextWaste"
    data-get-warn=".*(\d+).*"
    data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
    data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
    data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'></div>                 
            <div data-type="label"
         data-part="(.*)_.*"
     data-device="Google_Abfallkalender"
     data-get="nextWaste"
     class="top-narrow"></div>
       </div> <!-- /popuplink -->
       <div class="dialog">
       <header>Leerungen</header>
                <div class="vbox center-align">
                    <div class="hbox center-align items-top top-space">
                      <div class="bold">Restabfall/Wertstoffe</div>
                  <div data-type="label"
                                data-device="Google_Abfallkalender"
                                data-get="L_Restabfall/Wertstoffe"
                                class=""></div>
                    </div> <!-- /hbox -->
            <div class="hbox center-align items-top top-narrow-3x">
              <div class="bold">Bioabfall</div>
              <div data-type="label"
                                data-device="Google_Abfallkalender"
                                data-get="L_Bioabfall"
                                class=""></div>
                    </div> <!-- /hbox -->
                    <div class="hbox center-align items-top top-narrow-3x">
                  <div data-type="push"
                  data-device="doif_Muell_Count"
                       data-set-on="cmd_2"
                  data-on-color="white"
                  data-on-background-color="green"
                  data-icon="fa-chevron-down"></div>
                  <div data-type="push"
                  data-device="doif_Muell_Count"
                  data-set-on="cmd_1"
                  data-on-color="white"
                  data-on-background-color="green"
                  data-icon="fa-chevron-up"></div>
                    </div> <!-- /hbox -->
                </div> <!-- /vbox -->
        </div><!-- /dialog -->
    </div> <!-- /popup -->

[yersinia]

Wenn ich im symbol div top-space entferne dann ragt das warn-icon etwas in den Header.
Mit der vbox Variante war alles perfekt ausgerichtet (siehe Bilder oben), auch wenn label mal zweizeilig ist.

Naja, es funktioniert ja erstmal, hübsch machen kann man danach.
Das Problem an der vbox-Variante war, dass die a) nicht geschlossen worden ist und b) aus einem ganz anderem Design herrührt:

Hast du dafür auch eine Lösung, aus diesem Beitrag ist übrigens die vbox-Variante entstanden (weil du oben gefragt hattest (und wieder rauseditiert) weshalb ich das so mache), meine das war doch schon alles korrekt so.

Jetzt kannst du die Elemente entsprechend schrittweise (!) positionieren. Du könntest auch das popup-widget über das class Attribut mit einem top-space positionieren, als Beispiel. Es spricht ja auch nichts dagegen, vbox sinnvoll einzusetzen, zB beim div des Links.

Code Auswählen Erweitern

<div class="vbox"> <!-- popuplink -->
            <div class="bigger bottom-narrow"
                data-device="Google_Abfallkalender"
    data-type="symbol"
    data-get="nextWaste"
    data-get-warn=".*(\d+).*"
    data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
    data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
    data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'></div>                 
            <div data-type="label"
         data-part="(.*)_.*"
     data-device="Google_Abfallkalender"
     data-get="nextWaste"
     class="top-narrow"></div>
       </div> <!-- /popuplink -->
Vielmehr geht es um Stückweises probieren.

[TomLee]

Super, Danke. Jetzt sitzt alles wieder an der richtigen Stelle.

Die Darstellung der Leerungen hat mir noch nicht gepasst und die Positionierung der label und Text-Elemente hat mich jetzt einige Zeit gefesselt, aber die Erkenntnis war, alles Mist und brachte mich auf die Idee auch hier die Tonne mit warn-Icon zu verwenden.

Jetzt mit einer hbox und drei vbox.
Bei der Lösung ist das div um header entscheidend (hab ich lange gebraucht drauf zu kommen), mit dem div um header wird aber der Hintergrund dessen nicht mehr dunkler dargestellt, mit card in dem div sieht das wieder so ähnlich aus wie normal.

Sieht doch gut aus 

Sagst du passt so oder würdest du es anders machen ?

Code Auswählen Erweitern

<header>Müllabfuhr</header>
<div data-type="popup" data-height="152px" data-width="300px">
<div class="vbox"> <!-- popuplink vbox-->
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'></div>                 
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow"></div>
</div> <!-- /popuplink /vbox-->
<div class="dialog">
<div class="card">
<header>Leerungen</header>
<div class="hbox top-space">
<div class="vbox">
<div class="bigger"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="L_Bioabfall"
data-get-warn="(\d+)"
data-color="#783C00"
data-icon="fa-trash-o warn"></div>
<div class="bold top-narrow">Bioabfall</div>                     
</div> <!-- /vbox -->
<div class="vbox">
<div class="bigger"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="L_Restabfall/Wertstoffe"
data-get-warn="(\d+)"
data-color="#87837D"
data-icon="fa-trash-o warn"></div>
<div class="bold top-narrow">Restabfall/Wertstoffe</div>
</div> <!-- /vbox -->
<div class="vbox">
<div class=""
data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-plus"
data-hide=""
data-hide-on=""
data-hide-off=""></div>
</div> <!-- /header -->
</div> <!-- /vbox -->
</div> <!-- /hbox -->
</div><!-- /dialog -->
</div> <!-- /popup -->


Nächstes Ziel ist den push-Button nach Betätigung bis zum nächsten passenden Abfall-Event (Bio oder Restabfall) zu verstecken, das sichergestellt ist das man immer nur einmal erhöhen kann, aber hab noch zu wenig darüber sinniert das mir klar wäre ob ich das jetzt über das DOIF oder einem userReadings lösen werde