FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: ekur am 04 März 2017, 12:43:43

Titel: Gelöst: Ausrichtung von Anzeigen
Beitrag von: ekur am 04 März 2017, 12:43:43
EDIT:

Ich habe die Lösung gefunden: Die class centered musste als eigene Definition oberhalb stehen und dazu in der ersten Unterdefinition ein inline damit alle Definitionen mit einbezogen werden, also so:


<div    class="centered">
<div    class="top-narrow inline">

und danach die anderen Definitionen.


Hallo,

nach dem Update auf die neueste Version hat es bei mir ein paar Anzeigen durcheinander gewirbelt aufgrund anderer Definitionen für Größen etc. Mit ein bischen Fleissarbeit habe ich alles wieder soweit ansehnlich bekommen bis auf einen Punkt, den ich nicht hinbekomme. Es geht um die Anzeige gemäß Anhang, und hier um die unterste Zeile, die ich nicht gemittelt in die Zelle bekomme. Der obere Teil (die drei ersten Zeilen)  ist als Tabelle über die classes cell-1-3 (jeweils eine Spalte für ein Symbol plus den Text dahinter) und inline definiert, die untere Zeile einfach als eine Zeile über die class inline. Ich bekomme diese Zeile jetzt nicht gemittelt, die class centered zeigt keine Wirkung.

Hier als code-Auszug einmal die rechte Spalte des oberen Teils und die Definition der unteren Zeile (beginnt ab der class top-narrow):

<div    class="cell top-narrow-2x cell-1-3 inline">
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain06" data-unit=" %"
                class="cell inline bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain12" data-unit=" %"
                class="cell inline darker bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain18" data-unit=" %"
                class="cell inline bigger"></div>
        </div>
        <div    class="top-narrow centered">
        <div    data-type="label" style="font-size:14px" class="cell inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_min"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="2" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_max"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="4" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_humidity"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="humidity" data-unit=" %"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_wind"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="wind" data-unit=" km/h"
                class="cell bigger inline"></div>
        </div>


Hat jemand eine Idee wie ich die Zeile mittig ausrichten kann?

ekur
Titel: Antw:Gelöst: Ausrichtung von Anzeigen
Beitrag von: kvo1 am 10 März 2017, 00:04:43
Hallo ekur

wäre es möglich das gesamte HTML - Beispiel zu poste, versuche gerade ähnliches und breche mir grade einen ab, will einfach nicht gelingen.

Eigentlich will ich nur 3 Spalte (Symbole mit Bezeichnung darunter) darstellen !

Danke
Titel: Antw:Gelöst: Ausrichtung von Anzeigen
Beitrag von: ekur am 10 März 2017, 15:51:00
Klar, kein Problem. Das font-size Gedöns habe ich noch nicht umgestellt. Läuft bei mir mit:


    <meta name="widget_base_width" content="93">
    <meta name="widget_base_height" content="110">
    <meta name="widget_min_cols" content="13">


Wahrscheinlich kann das auch noch einfacher gemacht werden:


<li data-row="1" data-col="4" data-sizex="5" data-sizey="2">
    <header><div data-type="label" style="font-size:14px" class="inline">VORHERSAGE für HEUTE, den</div>
        <div    data-type="label" style="font-size:14px"
                data-device="Wetter" data-get="fc0_date" class="inline"></div></header>
        <div    class="cell top-narrow-2x cell-1-3 inline">
        <div    data-type="symbol" data-icon="oa-time_clock" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" class="cell inline bigger">06.00</div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-time_clock" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" class="cell darker inline bigger">12.00</div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-time_clock" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" class="cell inline bigger">18.00</div>
        </div>
        <div    class="cell top-narrow-2x cell-1-3 inline">
        <div    data-type="symbol" data-icon="oa-temp_temperature" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_temp06" data-unit="%B0C%0A"
                class="cell inline bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_temp12" data-unit="%B0C%0A"
                class="cell inline darker bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_temp18" data-unit="%B0C%0A"
                class="cell inline bigger"></div>
        </div>
        <div    class="cell top-narrow-2x cell-1-3 inline">
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain06" data-unit=" %"
                class="cell inline bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain12" data-unit=" %"
                class="cell inline darker bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain18" data-unit=" %"
                class="cell inline bigger"></div>
        </div>
        <div    class="centered">
        <div    class="top-narrow inline">
        <div    data-type="label" style="font-size:14px" class="cell inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_min"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="2" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_max"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="4" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_humidity"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="humidity" data-unit=" %"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_wind"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="wind" data-unit=" km/h"
                class="cell bigger inline"></div>
        </div></div>
</li>


Titel: Antw:Gelöst: Ausrichtung von Anzeigen
Beitrag von: Gunther am 12 März 2017, 21:26:23
hast Du mal versucht das centered in das inline-div reinzunehmen?:

        <div    class="top-narrow inline centered">
        <div    data-type="label" style="font-size:14px" class="cell inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_min"
                    data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="2" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_max"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="4" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_humidity"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="humidity" data-unit=" %"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_wind"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="wind" data-unit=" km/h"
                class="cell bigger inline"></div>
</div>
Titel: Antw:Gelöst: Ausrichtung von Anzeigen
Beitrag von: Gunther am 12 März 2017, 21:27:00
oh gerade erst gesehen, dass Du schon eine Lösung hattest... ;-)