INLINE scheint nicht zu greifen

Begonnen von hermann1514, 23 Januar 2018, 10:49:16

Vorheriges Thema - Nächstes Thema

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:



<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

#1
Das cell muss weg.

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

drhirn

Übrigens: Das
<header><div data-type="label" class="medium orange">Heizung</div></header>
schafft nur Java-Script Overhead.
<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.

<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:

<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  ;D ::)

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;

<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.


<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?  8)

Wird das noch wirklich gemacht?


drhirn

Zitat von: hermann1514 am 23 Januar 2018, 20:35:55
Tabelle ist aber uncool - oder?  8)

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? ;)