Nach unten Versetzte widgets Tablet Ui

Begonnen von Pusemukel, 11 Mai 2018, 22:55:24

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Pusemukel

11 Mai 2018, 22:55:24 Letzte Bearbeitung: 11 Mai 2018, 23:30:49 von Pusemukel
Hallo Leute,
Ich komme bei einem Problem nicht weiter, und zwar habe ich seit kurzem das Problem das meine Widgets
nach unten versetzt sind, soll heißen das diese eigentlich auserhalb der Pages sind, siehe Bild.
Dies gilt allerdings nur für Unterseiten die ich über ein Pagebutton Menü lade.

Eigentlich habe ich nichtś geändert  ;D zumidest wüste ich es nicht, eventuell hat mir ein update etwas zerschossen. 



Bild:
https://www.dropbox.com/s/qk02qk56gzuzjnr/Tablet%20UI.png?dl=0


Hier  Mal mein Menü:
Code Auswählen
<html>
<title>FHEM</title>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * second page

     <li data-row="1" data-col="1" data-sizex="14" data-sizey="9">
        <header><div data-type="label" class="medium orange">Cam Garten</div></header>

     *
     load this page via widget pagebutton

     <div data-type="pagebutton"   data-url="#content_rooms.html"
          data-load="#content6"    data-off-background-color="transparent"
          data-off-color="#606060" data-on-background-color="#606060"
          data-on-color="#222222"  data-active-pattern=".*#content_cam.html"
          data-icon="fa-music"     class="prefetch top-space"></div>
    -->
</head>
<body>
<div class="page" id="1_light">
    <div class="gridster">
      <ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="7">
<header><div data-type="label" class="medium orange">Etagen</header>
            <div class="cell">

                <div data-type="pagebutton" data-url="#2_light_etage_Haus.html" data-load="#light_etage_Haus" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_light_etage_eg.html" data-icon="oa-control_building_s_eg" class="top-space"></div>
                <div data-type="label" class="darker">EG</div>

                <div data-type="pagebutton" data-url="#2_light_etage_Keller.html"       data-load="#light_etage_Keller" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_light_etage_kg.html" data-icon="oa-control_building_s_kg" class="top-space"></div>
                <div data-type="label" class="darker">KG</div>

                <div data-type="pagebutton" data-url="#2_light_etage_Garten.html"    data-load="#light_etage_Garten" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_light_etage_au.html" data-icon="oa-control_building_outside" class="top-space"></div>
                <div data-type="label" class="darker">Garten</div>

                <div data-type="pagebutton" data-url="#2_light_etage_Wichtige.html" data-load="#light_etage_Wichtige" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*1_light.html||.*#2_light_etage_xx.html)" data-icon="oa-control_building_s_all" class="top-space"></div>
                <div data-type="label" class="darker">Wichtigste</div>


                </div>
            </div>
        </li>
        <li data-row="1" data-col="1" data-sizex="9" data-sizey="7">
            <div class="page" id="light_etage_Haus"></div>
            <div class="page" id="light_etage_Garten"></div>
            <div class="page" id="light_etage_Keller"></div>
            <div class="page" id="light_etage_Wichtige"></div>

         </li>









      </ul>
    </div>
    </div>
</body>
</html>





Beispiel "Raum"
Code Auswählen
<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * main page
     *
     load this page via widget pagebutton

    -->
    <meta name="longpoll" content="1">

</head>
<body>
  <div class="page" id="light_etage_Haus">
    <div class="gridster">
    <ul>
<!--########################Dimmer#########################-->
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
      <Header>Küche</header>
        <div data-template="Dimmer_template.html" data-parameter='{"par1":"USB.G_Dimmer_Kueche"}'></div>
    </li>
    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
      <Header>Wohnzimmer</header>
      <div data-template="Dimmer_template.html" data-parameter='{"par1":"USB.G_Dimmer_WZ"}'></div>
    </li>
    <li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
      <Header>Abby</header>
        <div data-template="Dimmer_template.html" data-parameter='{"par1":"USB.G_Dimmer_Abby"}'></div>
    </li>
    <li data-row="1" data-col="9" data-sizex="1" data-sizey="1">
      <Header>Lotta</header>
      <div data-template="Dimmer_template.html" data-parameter='{"par1":"USB.G_Dimmer_Lotta"}'></div>
    </li>
    <li data-row="1" data-col="11" data-sizex="1" data-sizey="1">
      <Header>Flur</header>
        <div data-template="Dimmer_template.html" data-parameter='{"par1":"USB.G_Dimmer_Flur"}'></div>
    </li>
    <li data-row="1" data-col="13" data-sizex="1" data-sizey="1">
      <Header>Eltern</header>
      <div data-template="Dimmer_template.html" data-parameter='{"par1":"USB.G_Dimmer_Eltern"}'></div>
    </li>


<!--##################Licht Schalter##########################-->
    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
      <header>Arbeitsplatte</header>
        <div data-template="Schalter_template.html" data-parameter='{"Schalter1":"USB.G_Relai_Licht_Arbeitsplatte_Kanal1"}'></div>
    </li>
    <li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
      <header>Bad Groß</header>
      <div data-template="Schalter_template.html" data-parameter='{"Schalter1":"USB.G_Relai_Licht_BAD_Gross"}'></div>
      </li>
      <li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
        <header>Voraum Flur</header>
        <div data-template="Schalter_template.html" data-parameter='{"Schalter1":"USB.G_Relai_Licht_Voraum"}'></div>
      </li>
      <li data-row="2" data-col="9" data-sizex="1" data-sizey="1">
      <header>Licht WC</header>
      <div data-template="Schalter_template.html" data-parameter='{"Schalter1":"USB.G_Relai_Licht_WC"}'></div>
      </li>
    <li data-row="2" data-col="11" data-sizex="1" data-sizey="1">
      <header>Eltern Bett</header>
      <div data-template="Schalter_template.html" data-parameter='{"Schalter1":"USB.G_Relai_Licht_Bett_Kanal3"}'></div>
    </li>
    <li data-row="2" data-col="13" data-sizex="1" data-sizey="1">
      <header>Bad Spiegel</header>
      <div data-template="Schalter_template.html" data-parameter='{"Schalter1":"USB.G_Relai_Licht_Bad_Spiegel"}'></div>
    </li>

<!--######################################################################################################################################-->
<li data-row="3" data-col="3" data-sizex="6" data-sizey="1">
<header>Wohnzimmer Farbe</header>
<div class="hbox">
        <div data-type="switch"
          data-device="USB.G_Relai_RGB_WZ_Kanalx"
              data-get-on="on"
              data-get-off="off">
            </div>

            <div data-type="popup"
     data-height="100px"
     data-width="400px">
    <div>
      <div data-type="switch"
          data-icon="fa-signal"
          data-device="Wz.DeckeFarbe"
          data-get-on="on"
          data-color="255,255,255"
          data-cmd="255,255,255"
          data-background-color="">
        </div>
      </div>
    <div class="dialog">
        <header>Helligkeit</header>
        <div>
          <div class="hbox">
            <div data-type="switch" data-device="Wz.DeckeFarbe"data-cmd="dim 7"data-get-on"7"data-get="brightness"></div>
            <div data-type="switch" data-device="Wz.DeckeFarbe"data-cmd="dim 10"data-get-on"10"data-get="brightness"></div>
            <div data-type="switch" data-device="Wz.DeckeFarbe"data-cmd="dim 25"data-get-on"25"data-get="brightness"></div>
            <div data-type="switch" data-device="Wz.DeckeFarbe"data-cmd="dim 50"data-get-on"50"data-get="brightness"></div>
            <div data-type="switch" data-device="Wz.DeckeFarbe"data-cmd="dim 70"data-get-on"70"data-get="brightness"></div>
            <div data-type="switch" data-device="Wz.DeckeFarbe"data-cmd="dim 100"data-get-on"100"data-get="brightness"></div>
        </div>
      </div>
    </div>
</div>

            <div data-type="switch"
              data-device="Wz.DeckeFarbe"
                  data-get-on="on"
                  data-color="255,255,255"
                  data-cmd="255,255,255"
                  data-background-color="">
                </div>
                            <div data-type="switch"
                              data-device="Wz.DeckeFarbe"
                                  data-get-on="on"
                                  data-color="34,139,34"
                                  data-cmd="34,139,34"
                                  data-background-color="">
                                </div>
                                            <div data-type="switch"
                                              data-device="Wz.DeckeFarbe"
                                                  data-get-on="on"
                                                  data-color="255,0,0"
                                                  data-cmd="255,0,0"
                                                  data-background-color="">
                                                </div>
                                                            <div data-type="switch"
                                                              data-device="Wz.DeckeFarbe"
                                                                  data-get-on="on"
                                                                  data-color="186,85,211"
                                                                  data-cmd="186,85,211"
                                                                  data-background-color="">
                                                                </div>
                                                                            <div data-type="switch"
                                                                              data-device="Wz.DeckeFarbe"
                                                                                  data-get-on="on"
                                                                                  data-color="255,215,0"
                                                                                  data-cmd="255,215,0"
                                                                                  data-background-color="">
                                                                                </div>
                                                                                            <div data-type="switch"
                                                                                              data-device="Wz.DeckeFarbe"
                                                                                                  data-get-on="on"
                                                                                                  data-color="255,255,255"
                                                                                                  data-cmd="255,255,255"
                                                                                                  data-background-color="">
                                                                                                </div>
              </div>






</li>


      </ul>
    </div>
  </div>
</body>
</html>


Hat jemand eine idee ?
Drucken
Nach oben Seiten1
Benutzer-Aktionen