FHEM Forum

Hallo zusammen,


seit kurzem beschäftige ich mich mit dem TabletUI. Leider bin ich völlig neu im Thema (Auch html nur Anfänger)

Habe schon einiges hinbekommen, stecke aber nun an meinem "Pollen Fenster" fest.

Ich möchte gerne die Symbole samt Überschrift immer paarweise nebeneinander, so dass ich 4 Reihen untereinander bekomme.

So sieht mein Code Snippet aus vom Pollen Fenster
<li data-row="2" data-col="2" data-sizex="1" data-sizey="3">
     
<div class="big">
        <header>Pollen</header></div>
<div class="row darker">
</div>



<div class="row">
<div class="col">
  <div data-type="label"
class="darker">Heute

  <div data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc1_maximum"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big">
</div>
<div class="row">

<div class="col">
       <div data-type="label"
class="darker">Erle
</div>


  <div data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc1_Erle"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big">
</div>


</div> </div>





<div class="col">
<div data-type="label"
class="darker">Gr&auml;ser
</div>
<div class="row">
<div        data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc1_Graeser"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big">
</div>
</div>

<div class="row">
<div data-type="label"
class="darker">Roggen
</div>
<div class="row">
<div        data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc1_Roggen"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big">
</div>
</div>




<div class="col">
<div data-type="label"
data-device="MeinWetter"
data-get="fc2_day_of_week"
class="darker">
</div>
<div class="row">
<div        data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc2_maximum"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big">
</div>
</div>

<div class="row">
<div data-type="label"
data-device="MeinWetter"
data-get="fc3_day_of_week"
class="darker">
</div>
<div class="row">
<div        data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc3_maximum"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big">
</div>
</div>

<div class="row">
<div data-type="label"
data-device="MeinWetter"
data-get="fc4_day_of_week"
class="darker">
</div>
<div class="row">
<div        data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc4_maximum"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big">
</div>
</div>

</li>


und auf dem Bildschirm kommt es dann wie auf dem Bild im Anhang

Vielen Dank für Eure Hilfe....

Gruß Albi

@Albi
Meintest Du in etwa so?


    <li data-row="2" data-col="2" data-sizex="1" data-sizey="3">
      <header class="hidden4mobile">EXAMPLE3.2</header>
      <!-- ++++++++++++++++++++++ -->
    <div class="big"><header>Pollen</header></div>

<div class="row">
<div class="col">
<div data-type="label" class="darker">Heute</div>
<div data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc1_maximum"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big"></div>
</div>
<div class="col">
<div data-type="label" class="darker">Erle</div>
<div data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc1_Erle"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big"></div>
</div>
</div>

<div class="row">
<div class="col">
<div data-type="label" class="darker">Gr&auml;ser</div>
<div        data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc1_Graeser"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big"></div>
</div>
<div class="col">
<div data-type="label" class="darker">Roggen</div>
<div        data-type="symbol"
data-device="Pollenflugvorhersage"
data-get="fc1_Roggen"
data-icons='["oa-weather_pollen"]'
data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
data-on-colors='["white","yellow","orange","red"]'
class="big"></div>
</div>
</div>
      <!-- ---------------------- -->
    </li>



Hallo,


ja genau so. Danke, das hilft mir extrem weiter.