[gelöst] TabletUI Progress-Button nicht mit anderem Button und Switch inline

[sTaN]

Hallo liebe Community,

ich bin gerade etwas am Verzweifeln. Ich baue mir gerade meine Heizungssteuerung in TabletUI und schaffe es einfach nicht, dass mein Button mit fa_calendar icon (für weekprofile) neben dem progress Button inline (siehe roten Pfeil) erscheint.

Hier mein TabletUI Code:

Code Auswählen Erweitern

        <li data-row="2" data-col="8" data-sizex="2" data-sizey="2">
        <header><font size="">Heizung Badezimmer</font></header>
          <div data-type="thermostat" data-device="WT_Bad"
            data-get="desiredTemperature" data-set="desiredTemperature" data-temp="temperature"
            data-valve="boostValveposition" data-min="16" data-max="24" data-step="0.5"
            data-mode="mode" data-off="desiredTemperature auto eco" data-boost="boostDuration 5"
            class="cell">
          </div>
          <div data-type="label" data-device="WT_Bad" data-get="mode" class="cell"></div>
          <div data-type="progress" data-device="HT_Bad" data-get="valveposition" data-progress-width=100 data-unit="%"></div>
          <div data-type="weekprofile" data-device="weekprf" data-profile="Badezimmer" data-todevice='["WT_Bad","HT_Bad"]' data-title="Heizung Bad"
            data-style="round" data-theme="dark" data-height="400" data-width="auto">
            <div data-type="button" class="inline readonly" data-icon="fa-calendar" data-background-icon="fa-circle" data-on-background-color="green">
          </div>
          <div data-type="switch" data-get="mode" data-get-on="night" data-fhem-cmd="set WT_Bad desiredTemperature auto eco" data-icon="fa-moon-o" class="inline"></div>
          <div data-type="switch" data-get="mode" data-get-on="day" data-fhem-cmd="set WT_Bad desiredTemperature comfort" data-icon="fa fa-sun-o" class="inline"></div>
          <div data-type="switch" data-device="WT_Bad" data-get="mode" data-set="desiredTemperature" data-states='["auto","manual","boost","eco","comfort"]'
            data-set-states='["16.5","auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual","fa-spinner fa-pulse","oa-sani_heating_automatic","oa-sani_heating_automatic"]' data-colors='["#32a054","#6699FF","#ad3333","SlateBlue","SlateBlue"]'
            data-background-icon="fa-circle" data-background-colors='["#505050","#505050","#505050","g#505050rey"]' class="inline"></div>
          <div data-type="label" data-device="WT_Bad" data-get="temperature" data-limits='[15,17,25]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="cell big"></div>
          <div class="darker narrow">Temperatur</div>
        </li>

Siehe Screenshot hätte ich gern das grün leuchtende fa_calendar Icon neben dem progress Button 0%.
Verstehe nicht, wo ich eine neue Zeile definiert habe. Wahrscheinlich ein ganz blöder Fehler...

Gruß und danke
sTaN

[yersinia]

Ist die Verschachtelung (button im weekprofile) so korrekt? Zumal beim button das schließende div fehlt:

Code Auswählen Erweitern

          <div data-type="weekprofile" data-device="weekprf" data-profile="Badezimmer" data-todevice='["WT_Bad","HT_Bad"]' data-title="Heizung Bad"
            data-style="round" data-theme="dark" data-height="400" data-width="auto">
            <div data-type="button" class="inline readonly" data-icon="fa-calendar" data-background-icon="fa-circle" data-on-background-color="green"> <!-- hier fehlt das schließende div -->
          </div>
Ich würde eher sowas erwarten:

Code Auswählen Erweitern

          <div data-type="weekprofile" data-device="weekprf" data-profile="Badezimmer" data-todevice='["WT_Bad","HT_Bad"]' data-title="Heizung Bad"
            data-style="round" data-theme="dark" data-height="400" data-width="auto">
          </div>
            <div data-type="button" class="inline readonly" data-icon="fa-calendar" data-background-icon="fa-circle" data-on-background-color="green">
          </div>

[sTaN]

Ist die Verschachtelung (button im weekprofile) so korrekt? Zumal beim button das schließende div fehlt:

Das dachte ich auch erst. Hatte das Beispiel aus dem Wiki vom weekprofile Widget genommen.
https://wiki.fhem.de/wiki/FTUI_Widget_Weekprofile

So funktioniert es auch. Wenn ich das schließende </div> setze, dann erscheint mir nicht das weekprofile.
Ohne das div öffnet er mir es. (siehe Screenshot).

Ich habe auch mal den ganzen Block für das weekprofile Widget herausgenommen und die anderen Icons bleiben weiterhin in einer neuen Zeile, obwohl mit class="inline" deklariert. (Ebenfalls im Screenshot Hintergrund sichtbar)

Ich verstehe nicht...

Gruß
sTaN

[yersinia]

Das ist allemal kurios, da der div-Container geschlossen werden muss, sonst kommt der html code durcheinander.
Und das geht auch nicht?

Code Auswählen Erweitern

          <div data-type="weekprofile" data-device="weekprf" data-profile="Badezimmer" data-todevice='["WT_Bad","HT_Bad"]' data-title="Heizung Bad"
            data-style="round" data-theme="dark" data-height="400" data-width="auto">
             <div data-type="button" class="inline readonly" data-icon="fa-calendar" data-background-icon="fa-circle" data-on-background-color="green">
             </div>
          </div>
Das inline in der class kannst du hier mMn weglassen.

[sTaN]

Das ist allemal kurios, da der div-Container geschlossen werden muss, sonst kommt der html code durcheinander.
Und das geht auch nicht?
Das inline in der class kannst du hier mMn weglassen.

Wenn ich das inline for dem readonly weglasse, packt er mir es ebenfalls in eine neue Zeile, genau wie bei deinem Code. In beiden Fällen sieht es dann wie im Screenshot aus.

Mir scheint so, als ob er immer nach dem Progress Button für die Stellantriebposition (valveposition) eine neue Zeile macht, aber wieso ist mir schleierhaft....

Gruß
sTaN

[yersinia]

Hast du das inline an der richtigen Stelle?

Code Auswählen Erweitern

          <div data-type="weekprofile" data-device="weekprf" data-profile="Badezimmer" data-todevice='["WT_Bad","HT_Bad"]' data-title="Heizung Bad"
            data-style="round" data-theme="dark" data-height="400" data-width="auto" class="inline"> <!-- <--hier -->
             <div data-type="button" class="readonly" data-icon="fa-calendar" data-background-icon="fa-circle" data-on-background-color="green">
             </div>
          </div>

[sTaN]

Hast du das inline an der richtigen Stelle?

Ja genau dort! Hier noch mal der vollständige aktuelle Code:

Code Auswählen Erweitern

        <li data-row="2" data-col="8" data-sizex="2" data-sizey="2">
        <header><font size="">Heizung Badezimmer</font></header>
          <div data-type="thermostat" data-device="WT_Bad"
            data-get="desiredTemperature" data-set="desiredTemperature" data-temp="temperature"
            data-valve="boostValveposition" data-min="16" data-max="24" data-step="0.5"
            data-mode="mode" data-off="desiredTemperature auto eco" data-boost="boostDuration 5"
            class="cell">
          </div>
          <div data-type="label" data-device="WT_Bad" data-get="mode" class="cell"></div>
          <div data-type="progress" data-device="HT_Bad" data-get="valveposition" data-progress-width=100 data-unit="%" class=""></div>
          <div data-type="weekprofile" data-device="weekprf" data-profile="Badezimmer" data-todevice='["WT_Bad","HT_Bad"]' data-title="Heizung Bad"
          data-style="round" data-theme="dark" data-height="400" data-width="auto" class="inline">
          <div data-type="button" class="readonly" data-icon="fa-calendar" data-background-icon="fa-circle" data-on-background-color="green"></div>
          </div>
          <div data-type="switch" data-get="mode" data-get-on="night" data-fhem-cmd="set WT_Bad desiredTemperature auto eco" data-icon="fa-moon-o" class="inline"></div>
          <div data-type="switch" data-get="mode" data-get-on="day" data-fhem-cmd="set WT_Bad desiredTemperature comfort" data-icon="fa fa-sun-o" class="inline"></div>
          <div data-type="switch" data-device="WT_Bad" data-get="mode" data-set="desiredTemperature" data-states='["auto","manual","boost","eco","comfort"]'
            data-set-states='["16.5","auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual","fa-spinner fa-pulse","oa-sani_heating_automatic","oa-sani_heating_automatic"]' data-colors='["#32a054","#6699FF","#ad3333","SlateBlue","SlateBlue"]'
            data-background-icon="fa-circle" data-background-colors='["#505050","#505050","#505050","g#505050rey"]' class="inline"></div>
          <div data-type="label" data-device="WT_Bad" data-get="temperature" data-limits='[15,17,25]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="cell big"></div>
          <div class="darker narrow">Temperatur</div>
        </li>

Siehe Screenshot, bleibt dennoch das Icon in der Zeile nach dem 0% Icon. Wie vorher auch (allerdings jetzt mit dem saubereren Code).

Gruß
sTaN

[yersinia]

Mmh, gute Frage. Mir sind noch zwei Sachen aufgefallen. Hier fehlen bei data-progress-width wahrscheinlich die "

Code Auswählen Erweitern

          <div data-type="progress" data-device="HT_Bad" data-get="valveposition" data-progress-width="100" data-unit="%" class=""></div>
Und du hast hier eine lange Reihe an Elementen mit inline, nimm mal testhalber eins raus, zB hier:

Code Auswählen Erweitern

          <div data-type="switch" data-get="mode" data-get-on="night" data-fhem-cmd="set WT_Bad desiredTemperature auto eco" data-icon="fa-moon-o" class=""><!-- <-- hier --></div>
          <div data-type="switch" data-get="mode" data-get-on="day" data-fhem-cmd="set WT_Bad desiredTemperature comfort" data-icon="fa fa-sun-o" class="inline"></div>

[sTaN]

Mmh, gute Frage. Mir sind noch zwei Sachen aufgefallen. Hier fehlen bei data-progress-width wahrscheinlich die "

Code Auswählen Erweitern

          <div data-type="progress" data-device="HT_Bad" data-get="valveposition" data-progress-width="100" data-unit="%" class=""></div>

Gutes Auge! Scheinbar macht das zwar kein Problem und bringt auch keine Verbesserung, aber habe ich nun sauber in Anführungszeichen gesetzt! Danke

Und du hast hier eine lange Reihe an Elementen mit inline, nimm mal testhalber eins raus, zB hier:

Code Auswählen Erweitern

          <div data-type="switch" data-get="mode" data-get-on="night" data-fhem-cmd="set WT_Bad desiredTemperature auto eco" data-icon="fa-moon-o" class=""><!-- <-- hier --></div>
          <div data-type="switch" data-get="mode" data-get-on="day" data-fhem-cmd="set WT_Bad desiredTemperature comfort" data-icon="fa fa-sun-o" class="inline"></div>

Wenn ich ein inline rausnehme, fängt er in einer neuen Zeile an, was mir eigentlich auch logisch scheint. Screenshot 1
Was ich jetzt aber mal noch gemacht habe ist folgendes:

Habe auch im data-type="progress" die class="inline" gesetzt und dann sind alle Icons in einer Zeile. Was ich allerdings auch nicht möchte...Ich brauche quasi nach dem grünen Icon einen Zeilenumbruch, aber bekomme es einfach nicht gebacken.

Hier der letzte Code (habe in den ersten beiden div's jeweils noch cell entfernt, damit die Icons näher zusammenrücken)

Code Auswählen Erweitern

<li data-row="2" data-col="8" data-sizex="2" data-sizey="2">
        <header><font size="">Heizung Badezimmer</font></header>
          <div data-type="thermostat" data-device="WT_Bad"
            data-get="desiredTemperature" data-set="desiredTemperature" data-temp="temperature"
            data-valve="boostValveposition" data-min="16" data-max="24" data-step="0.5"
            data-mode="mode" data-off="desiredTemperature auto eco" data-boost="boostDuration 5"
            class="top-space">
          </div>
          <div data-type="label" data-device="WT_Bad" data-get="mode" class="top-narrow-2x"></div>
          <div data-type="progress" data-device="HT_Bad" data-get="valveposition" data-progress-width="100" data-unit="%" class="top-space inline"></div>
          <div data-type="weekprofile" data-device="weekprf" data-profile="Badezimmer" data-todevice='["WT_Bad","HT_Bad"]' data-title="Heizung Bad"
          data-style="round" data-theme="dark" data-height="400" data-width="auto" class="inline">
          <div data-type="button" class="readonly" data-icon="fa-calendar" data-background-icon="fa-circle" data-on-background-color="green"></div>
          </div>
          <div data-type="switch" data-get="mode" data-get-on="night" data-fhem-cmd="set WT_Bad desiredTemperature auto eco" data-icon="fa-moon-o" class="inline"></div>
          <div data-type="switch" data-get="mode" data-get-on="day" data-fhem-cmd="set WT_Bad desiredTemperature comfort" data-icon="fa fa-sun-o" class="inline"></div>
          <div data-type="switch" data-device="WT_Bad" data-get="mode" data-set="desiredTemperature" data-states='["auto","manual","boost","eco","comfort"]'
            data-set-states='["16.5","auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual","fa-spinner fa-pulse","oa-sani_heating_automatic","oa-sani_heating_automatic"]' data-colors='["#32a054","#6699FF","#ad3333","SlateBlue","SlateBlue"]'
            data-background-icon="fa-circle" data-background-colors='["#505050","#505050","#505050","g#505050rey"]' class="inline">
          </div>
          <div data-type="label" data-device="WT_Bad" data-get="temperature" data-limits='[15,17,25]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="cell big"></div>
          <div class="darker narrow">Temperatur</div>
        </li>

Gruß
sTaN

[sTaN]

Okay jetzt habe ich es!

Habe die ersten beiden Icons noch in einen div-Tag gepackt und nun wird es endlich richtig dargestellt!!!

Vielen vielen Dank für den schnelle Support!!!

Anbei noch mal der finale Code:

Code Auswählen Erweitern

<li data-row="2" data-col="8" data-sizex="2" data-sizey="2">
        <header><font size="">Heizung Badezimmer</font></header>
          <div data-type="thermostat" data-device="WT_Bad"
            data-get="desiredTemperature" data-set="desiredTemperature" data-temp="temperature"
            data-valve="boostValveposition" data-min="16" data-max="24" data-step="0.5"
            data-mode="mode" data-off="desiredTemperature auto eco" data-boost="boostDuration 5"
            class="top-space">
          </div>
          <div data-type="label" data-device="WT_Bad" data-get="mode" class="top-narrow-2x"></div>
          <div>
            <div data-type="progress" data-device="HT_Bad" data-get="valveposition" data-progress-width="100" data-unit="%" class="top-space inline"></div>
            <div data-type="weekprofile" data-device="weekprf" data-profile="Badezimmer" data-todevice='["WT_Bad","HT_Bad"]' data-title="Heizung Bad"
          data-style="round" data-theme="dark" data-height="400" data-width="auto" class="inline">
            <div data-type="button" class="readonly" data-icon="fa-calendar" data-background-icon="fa-circle" data-on-background-color="green"></div>
            </div>
          </div>
          <div data-type="switch" data-get="mode" data-get-on="night" data-fhem-cmd="set WT_Bad desiredTemperature auto eco" data-icon="fa-moon-o" class="inline"></div>
          <div data-type="switch" data-get="mode" data-get-on="day" data-fhem-cmd="set WT_Bad desiredTemperature comfort" data-icon="fa fa-sun-o" class="inline"></div>
          <div data-type="switch" data-device="WT_Bad" data-get="mode" data-set="desiredTemperature" data-states='["auto","manual","boost","eco","comfort"]'
            data-set-states='["16.5","auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual","fa-spinner fa-pulse","oa-sani_heating_automatic","oa-sani_heating_automatic"]' data-colors='["#32a054","#6699FF","#ad3333","SlateBlue","SlateBlue"]'
            data-background-icon="fa-circle" data-background-colors='["#505050","#505050","#505050","g#505050rey"]' class="inline">
          </div>
          <div data-type="label" data-device="WT_Bad" data-get="temperature" data-limits='[15,17,25]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="big"></div>
          <div class="darker narrow">Temperatur</div>
        </li>