INLINE scheint nicht zu greifen

[hermann1514]

Hi,

bin gerade mal wieder dabei ein neues TabletUI zuerstellen. Ist mein 2. Versuch

Nun. Ich möchte gerne den Spinner in einer Reihe mit einem Label haben. Folgender Code schreibt dies aber untereinander:

Code Auswählen Erweitern

<li data-row="3" data-col="4" data-sizex="5" data-sizey="2">
<header><div data-type="label" class="medium orange">Heizung</div></header>
<div class="cell">
<div class="cell top-space valueonly inline"
data-type="spinner"
data-device="Heizung_Badezimmer_oben_Clima"
data-get="desired-temp"
data-set="desired-temp"
data-icon-left-color="blue"
data-icon-right-color="red"
data-height="60"
data-width="270"
data-step="0.5"
data-min="10"
data-max="30"
data-unit="&deg;">
</div>


<div class="cell inline" data-type="label">Badezimmer oben</div>
</div>
</li>


Was mache ich denn verkehrt?

Gruß
Hermann

[drhirn]

Das cell muss weg.

(300x korrigiert, weil ich nicht genau geschaut habe)

[drhirn]

Übrigens: Das

Code Auswählen Erweitern

<header><div data-type="label" class="medium orange">Heizung</div></header>
schafft nur Java-Script Overhead.

Code Auswählen Erweitern

<header class="medium orange">Heizung</header>
sollte eigentlich reichen.

[hermann1514]

Hmm...

das hatte ich auch schon.
Im folgenden Lin ksteht auch drin dass CELL unbedingt gesetzt werden muss:

https://forum.fhem.de/index.php?topic=39744.0


Also, ohne CELL geht es auch nicht.

Gruß
Hermann

[drhirn]

Hmm, müsste ich mir genauer ansehen. Komm nur leider grad nicht dazu.

Ich hab in letzter Zeit sehr gute Erfahrungen mit h- und vboxen gemacht.

Code Auswählen Erweitern


<div class="hbox">
    <div class="card" data-type="spinner"...></div>
    <div class="card" data-type="label"...></div>
</div>

Eventuell eine Option?

[drhirn]

Hoppla, die Klasse "card" funktioniert nicht mit dem Spinner, weil dann auch die Elemente im Spinner in einer Flexbox angeordnet werden.
Da müsstest du dann ein CSS hinzufügen:

Code Auswählen Erweitern


<div data-type="spinner" class="card" style="flex-direction: unset;"></div>


[hermann1514]

Ich versuche es mal mit hbox und vbox....

Da werden sicherlich noch Fragen kommen 

Gruß
Hermann

[hermann1514]

Eine Frage habe ich schon:

Ich habe zwar nun alles in einer Reihe hinbekommen, jedoch sind die Elemente untereinander verschoben.
Jemand eine Idee wie ich diese alle zentriert untereinander bekomme;

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="4" data-sizey="8" class="bg-blue">
<header class="medium white bg-gray-trans">Heizung</header>

<div class="vbox">

<div class="hbox">

<div class="right-space big black" data-type="label">Badezimmer oben</div>
<div class="valueonly"
data-type="spinner"
data-device="Heizung_Badezimmer_oben_Clima"
data-get="desired-temp"
data-set="desired-temp"
data-icon-left-color="blue"
data-icon-right-color="red"
data-height="60"
data-width="270"
data-step="0.5"
data-min="10"
data-max="30"
data-unit="&deg;">
</div>

<div data-type="symbol" data-device="OG.bz.FK" class="narrow bigger"></div>

</div>

<div class="hbox">
<div class="right-space big" data-type="label">Badezimmer unten</div>
<div class="valueonly"
data-type="spinner"
data-device="Heizung_Badezimmer_unten_Clima"
data-get="desired-temp"
data-set="desired-temp"
data-icon-left-color="blue"
data-icon-right-color="red"
data-height="60"
data-width="270"
data-step="0.5"
data-min="10"
data-max="30"
data-unit="&deg;">
</div>
<div data-type="symbol" data-device="OG.bz.FK" class="narrow bigger"></div>
</div>


<div class="hbox">
<div class="right-space big" data-type="label">Kueche</div>
<div class="valueonly"
data-type="spinner"
data-device="Heizung_Kueche_Clima"
data-get="desired-temp"
data-set="desired-temp"
data-icon-left-color="blue"
data-icon-right-color="red"
data-height="60"
data-width="270"
data-step="0.5"
data-min="10"
data-max="30"
data-unit="&deg;">
</div>
<div data-type="symbol" data-device="OG.bz.FK" class="narrow bigger"></div>
</div>



<div class="hbox">
<div class="right-space big" data-type="label">Zimmer Luca</div>
<div class="valueonly"
data-type="spinner"
data-device="Heizung_Luca_Clima"
data-get="desired-temp"
data-set="desired-temp"
data-icon-left-color="blue"
data-icon-right-color="red"
data-height="60"
data-width="270"
data-step="0.5"
data-min="10"
data-max="30"
data-unit="&deg;">
</div>
<div data-type="symbol" data-device="OG.bz.FK" class="narrow bigger"></div>
</div>
                                               </div>


</li>




Habe mal ein Screenshot angehängt.

Danke.
Gruß
Hermann

[drhirn]

Sollte theoretisch mit einer Kombination aus grow-n und align-items funktionieren. Mal abgesehen davon, dass die Klasse card bei Beschreibung, Spinner und Symbol fehlt.
Aber in dem Fall bist du wohl schneller, wenn du doch wieder alles zu einer (richtigen) Tabelle umfunktionierst.

Code Auswählen Erweitern


<div class="sheet">
    <div class="row">
        <div class="cell">Badezimmer oben</div>
        <div class="cell" data-type="spinner" ...></div>
        <div class="cell" data-type="symbol" ...></div>
    </div>
    <div class="row">
      ...
    </div>
</div>


[hermann1514]

Tabelle ist aber uncool - oder? 

Wird das noch wirklich gemacht?

[drhirn]

Tabelle ist aber uncool - oder? 

Wird das noch wirklich gemacht?

Jein. Für Datentabellen auf jeden Fall. Als "Designgrundlage" natürlich nicht. Weil Screenreader und sonstige Bedienungshilfen nicht damit klar kommen. Kurz gesagt. Aber wir haben ja nicht vor, uns TabletUI vorlesen zu lassen, oder?