Gridster Layout funktioniert nicht bei meinem Startbildschirm

Begonnen von smile7779, 10 Februar 2021, 16:27:38

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

smile7779

10 Februar 2021, 16:27:38
Hallo zusammen,

ich versuche es mal erneut mein Problem zu schildern in der Hoffnung, dass mir jemand sagen kann wo mein Fehler liegt. Ich habe schon alles mögliche versucht, komme aber leider nicht voran. Bin echt am verzweifeln :-(
Nun zu meinem Problem. Ich habe mir da eine Oberfläche für mein Tablet geschaffen. Nun möchte ich noch Temperaturen hier Anzeigen lassen. Augenscheinlich sollte dies auch passen (auf dem Foto bei Temperaturen) leider kopiert mir das System neue Schaltflächen bzw. Informationen in die Mitte direkt unter die Wohnzimmertemperatur. Ich wollte eigentlich die Temperaturen in einer Reihe aufgelistet haben. Ich habe schon alles versucht mit left-align usw. aber komme leider nicht zum gewünschten Effekt. Kann mir jemand von Euch ein bisschen helfen?

Code Auswählen
<!DOCTYPE html>
<html>

<head>

<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM</title>
    <!--
     /* 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>
    -->



<meta name="gridster_cols" content="21"/>
<meta name="gridster_rows" content="15"/>

</head>
<body>
<div class="page" id="1_wetter">

<li data-row="1" data-col="5" data-sizex="21" data-sizey="9">
        <header><div data-type="label" class="medium orange">Wetterdaten</div></header>




<div class="gridster">




<div class="row">

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-limits-get="WetterProplanta:fc0_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'>Heute</div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc0_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc0_date" data-limits-get="fc0_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc0_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc0_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>
</div>

</div>
<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-device="WetterProplanta" data-get="fc1_date" data-substitution="toDate().ee()"  data-limits-get="fc1_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc1_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc1_date" data-limits-get="fc1_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc1_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc1_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>
</div>
</div>

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-device="WetterProplanta" data-get="fc2_date" data-substitution="toDate().ee()"  data-limits-get="fc2_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc2_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc2_date" data-limits-get="fc2_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc2_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc2_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc2_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>
</div>
</div>

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-device="WetterProplanta" data-get="fc3_date" data-substitution="toDate().ee()"  data-limits-get="fc3_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc3_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc3_date" data-limits-get="fc3_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc3_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc3_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc3_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>
</div>
</div>

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-device="WetterProplanta" data-get="fc4_date" data-substitution="toDate().ee()"  data-limits-get="fc4_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc4_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc4_date" data-limits-get="fc4_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc4_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc4_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc4_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>

</div>

</div>
</li>

<li data-row="6" data-col="1" data-sizex="21" data-sizey="4">
        <header><div data-type="label" class="medium orange">Muellabfuhrplan und Benzinpreis Tankstelle Schoenberg</div></header>

<div class="sheet">
                    <div class="row">

                       
                        <div class="cell">
                            <div data-type="symbol" data-device="Muelltonnen" data-get="BlaueTonne_days" data-background-icon="fa-circle" class="bigger"
                                 data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin", "fa-trash warn fa-spin", "fa-trash warn"]' data-background-colors='["#262626"]' data-warn-background-color="#262626" data-color="#4286f4"></div>
                        </div>
                        <div class="cell">
                            <div data-type="symbol" data-device="Muelltonnen" data-get="Wertstofftonne_days" data-background-icon="fa-circle" class="bigger"
                                 data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin", "fa-trash warn fa-spin", "fa-trash warn"]' data-background-colors='["#262626"]' data-warn-background-color="#262626" data-color="#efef15"></div>
                        </div>
                        <div class="cell">
                            <div data-type="symbol" data-device="Muelltonnen" data-get="Abfalltonne_days" data-background-icon="fa-circle" class="bigger"
                                 data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin", "fa-trash warn fa-spin", "fa-trash warn"]' data-background-colors='["#262626"]' data-warn-background-color="#262626" data-color="#8c8c8c"></div>

</div>
<div class="cell">
                            <div data-type="symbol" data-device="Muelltonnen" data-get="Schadstoffe_days" data-background-icon="fa-circle" class="bigger"
                                 data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin", "fa-trash warn fa-spin", "fa-trash warn"]' data-background-colors='["#262626"]' data-warn-background-color="#262626" data-color="#FE0010"></div>

</div>
                        <div class="cell">

<img src="/fhem/www/tablet/img/Tankstelle/logohem.jpg" alt="HEM" width="70" height="70" />
                            <div data-type="label" data-device="OUT.Spritpreis" data-get="SuperE5" class="big" data-post-text=" EUR l/E5" data-substitution="s/\./,/g" data-limits='[0,1.25,1.48]' data-colors='["#6699FF","green","firebrick"]'></div>



</div>


<div class="cell">
<div class="">
<div data-type="label"  class="yellow">Aussentemperatur</div>


<div class="cell">
<div class="">
Temperatur
</div>
<div data-type="label"
data-device="Temp_Humi_Terrasse"
data-get="SI7021_Temperature"
data-unit="°C"
data-limits='[-20,20,50]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>
</div>
<div class="cell">
<div class="">
Luftfeuchtigkeit
</div>
<div data-type="label"
data-device="Temp_Humi_Terrasse"
data-get="SI7021_Humidity"
data-unit="%"
data-limits='[0,20,55]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>
</div>

</li>





<li data-row="8" data-col="1" data-sizex="21" data-sizey="4">
<header><div data-type="label" class="medium orange">Temperaturen</div></header>



<div class="cell">
                    <div class="">

<div data-type="label"  class="yellow">Wohnzimmertemperatur</div>



                        <div class="cell">
<div class="">


                        Temperatur
</div>
<div data-type="label"
data-device="Temp_Humi_WZ"
data-get="SI7021_Temperature"
data-unit="°C"
data-limits='[0,20,50]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>
</div>
<div class="top-space">
<div class="">
Luftfeuchtigkeit
</div>
<div data-type="label"
data-device="Temp_Humi_WZ"
data-get="SI7021_Humidity"
data-unit="%"
data-limits='[0,20,55]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>








</div>

</li>

</div>

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

drhirn

#1
12 Februar 2021, 11:28:14
Falsches Forum. Verschieb deinen Beitrag nach Frontends/TabletUI.

Ein <div> ist eine Box. Danach wird immer die Zeile umgebrochen. Deswegen steht das Zeug untereinander. Außer, du gibst dem <div> eine CSS-Klasse "inline" mit.
Code Auswählen

<div class="inline">
Drucken
Nach oben Seiten1
Benutzer-Aktionen