[gelöst] Tablet UI - Werte nebeneinander

Begonnen von drhirn, 29 Oktober 2015, 21:34:02

Vorheriges Thema - Nächstes Thema

drhirn

Schönen Abend!

Frage mich gerade, ob es in Tablet UI möglich ist, mehrere Werte in einer Textzeile darstellen zu lassen.
Ich versuche, Höchst- und Niedrigsttemperatur im Format 21°/12° anzuzeigen.

Holen tu ich mir die Werte mit einem "label"

<div class="cell" data-type="label" data-device="YahooWeather" data-get="fc1_high_c" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="YahooWeather" data-get="fc1_low_c" data-unit="%B0C%0A"></div>


Steht - eh klar - untereinander.

class="left" und class="right" hilft mir leider nicht weiter.

Ich hätte es mit einem SPAN versucht, das geht dann aber schon gar nicht. Auch ein style="float: right;" tut's nicht.

Geht das überhaupt?
Und warum müssen die Widgets immer DIVs sein?

Danke
Stefan

setstate

Class inline ist der Trick


<div class="inline" data-type="label" data-device="YahooWeather" data-get="fc1_high_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="YahooWeather" data-get="fc1_low_c" data-unit="%B0C%0A"></div>

drhirn

Also, manchmal steh ich gewaltig auf der Leitung ...  ;D

Danke, funktioniert einwandfrei!

Tedious

Nur als Hinweis um das abzurunden... Du kannst auch mit <table> arbeiten, da kannst Du recht genau platzieren (Geschmackssache, ist mir persönlich aber lieber als <right><left> etc. Spart bei kleinen Symbolen massig Platz. Hab z.B. so die Darstellung von allen Batterie-Stati als Ampel in einer 2x2 Box gepackt - hier will ich ja nur was sehen und nichts schalten.
FHEM auf Proxmox-VM (Intel NUC) mit 4xMapleCUN (433,3x868) und Jeelink, HUE, MiLight, Max!, SonOff, Zigbee, Alexa, uvm...

drhirn

Du meinst, die DIVs in einer Tabelle darstellen? Geht natürlich.
Aber wenn wir schon dabei sind, schöner wäre das natürlich mit den CSS-Attributen display:table und display:table-cell  ;)

uwirt

#5
Ich habe ein etwas ähnliches Problem und zwar möchte ich dasselbe zu vier aufeinanderfolgenden Tagen.

Für den ersten Tag hab ich das hingekriegt, nur leider stimmt es danach leider nicht mehr:



<div class="row">
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A"></div>/
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>

       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A"></div>/
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>

       <div class="cell inline" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
       <div class="cell inline" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
     </div>


Hat da jemand eine kluge Idee?
FHEM / Ubuntu / fitlet2
HomeMatic: CCU3|HmIP-STHD|HmIP-PCBS|HmIP-PCBS2|HmIP-PCBS-BAT|HM-WDC7000|HM-WDS100-C6-O|HM-WDS40|HM-LC-Sw1-FM|HM-LC-RGBW-WM|HM-ES-PMSw1-Pl|HM-ES-TX-WM
NAS: DS218+|DS209j|DS216+II|DS412+
Devices: Panasonic Webcams|Withings|Gardena Smart

yersinia

Probiere mal mit den CSS Klassen vbox (vertikal) bzw hbox (horizontal) zu experimentieren. Dann könnte man sich das inline sparen.
<div class="row">
       <div class="vbox">
                 <div class="" data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A"></div>/
                 <div class="" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>
       </div>

       <div class="vbox">
                <div class="" data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A"></div>/
                <div class="" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>
       </div>

       <div class="vbox">
               <div class="" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
               <div class="" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
       </div>
     </div>


Alternativ könnte man innerhalb der row noch mit der Klasse col (für column) arbeiten.
<div class="row">
       <div class="col-1-3">
                 <div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A"></div>/
                 <div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>
       </div>

       <div class="col-1-3">
                <div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A"></div>/
                <div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>
       </div>

       <div class="col-1-3">
               <div class="inline" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
               <div class="inline" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
       </div>
     </div>
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

uwirt

Ich hab es hingekriegt - ohne CSS-Klassen und ohne col:


<div class="row">
       <div class="cell">
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A"></div>/
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>
     </div>
       <div class="cell">
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A"></div>/
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>
     </div>
       <div class="cell">
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc4_low_c" data-unit="%B0C%0A"></div>/
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
     </div>
       <div class="cell">
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc5_low_c" data-unit="%B0C%0A"></div>/
       <div class="inline" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
     </div>
     </div>
FHEM / Ubuntu / fitlet2
HomeMatic: CCU3|HmIP-STHD|HmIP-PCBS|HmIP-PCBS2|HmIP-PCBS-BAT|HM-WDC7000|HM-WDS100-C6-O|HM-WDS40|HM-LC-Sw1-FM|HM-LC-RGBW-WM|HM-ES-PMSw1-Pl|HM-ES-TX-WM
NAS: DS218+|DS209j|DS216+II|DS412+
Devices: Panasonic Webcams|Withings|Gardena Smart