Ausrichtung in mobiler Ansicht

[klausw]

Hallo ich nutze die Mobil UI und habe ein Problem mit der vertikalen Ausrichtung:

Die Zeile Brennerinfo ist irgendwie anders ausgerichtet als der Rest, was übersehe ich?

Code Auswählen Erweitern

<section>
<div class="large col-1-2 left-align">Brennerinfo</div>
<div class="col-1-4 left-align">
<div data-type="label" class="small">heute</div>
<div data-type="label" class="small">gestern</div>
<div data-type="label" class="small">Monat</div>
<div data-type="label" class="small">Vormonat</div>
</div>
<div class="col-1-4 left-align">
<div data-type="label" data-device="Heizkessel" data-get="statBrennerDay" data-part=".*an:\s(.*)\san_Count.*" class="small"></div>
<div data-type="label" data-device="Heizkessel" data-get="statBrennerDayLast" data-part=".*an:\s(.*)\san_Count.*" class="small"></div>
<div data-type="label" data-device="Heizkessel" data-get="statBrennerMonth" data-part=".*an:\s(.*)\san_Count.*" class="small"></div>
<div data-type="label" data-device="Heizkessel" data-get="statBrennerMonthLast" data-part=".*an:\s(.*)\san_Count.*" class="small"></div>
</div>
</section>
        <section>
        <div class="large col-1-2 left-align">Wohnzimmer</div>
<div data-type="spinner"
    data-device="Thermostat_Wohnzimmer_Clima" data-get="desired-temp" data-set="desired-temp"
    data-background-color="#d3e0e5"
    data-min="4" data-max="30" data-step="0.5" data-unit="°"
    class="large col-1-2 valueonly">
</div>
<div class="small">
<div data-type="symbol" data-device="Fehler.warn" data-get="status_Thermostat_Wohnzimmer"
data-icons='["mi-signal_wifi_off fa-blink","fa-battery-empty fa-blink","fa-cog fa-spin"]'
data-on-colors='["Crimson","GoldenRod","Crimson","rgba(0,0,0,0.01)"]'
data-get-on='["offline","battlow","motorErr","Ok"]' class="autohide small right"
style="position: absolute; margin-right:-5px; margin-top:-65px; !important;">
</div>
<div data-type="symbol" data-device="Frost.warn" data-get="Frost_Thermostat_Wohnzimmer"
data-icons='["oa-temp_frost fa-blink","oa-temp_frost fa-blink"]'
data-on-colors='["Crimson","GoldenRod"]'
data-get-on='["Warnung","Achtung"]' class="autohide small right"
style="position: absolute; margin-right:-5px; margin-top:-21px; !important;">
</div>
</div>
        </section>

[setstate]

Brennerinfo ist richtig, die anderen sind falsch. Und das durch die Spinner, die bringen ein max-width: 200px; mit (also nicht 50%), dadurch verschiebt sich der Text nach rechts.

Spinner und col-1-2 müssen also separiert werden

Code Auswählen Erweitern


<div class="col-1-2">
       <div data-type="spinner"
              data-device="Thermostat_Wohnzimmer_Clima" data-get="desired-temp" data-set="desired-temp"
              data-background-color="#d3e0e5"
              data-min="4" data-max="30" data-step="0.5" data-unit="°"
              class="large valueonly"></div>
</div>


Die Texte müssen dann vllt. noch ein "left-space" oder "left-space-2x" bekommen oder einfach das "left-align" weglassen

[klausw]

Danke, jetzt passt es schon besser.
Bekomme ich das "Brennerinfo" denn irgendwie in die (vertikale)mitte, das es nicht so weit unten in der section ist?

[setstate]

Code Auswählen Erweitern


    <section>
        <div class="center">
            <div class="large col-1-2 left-align">Brennerinfo</div>
            <div class="col-1-4 left-align">
                            <div data-type="label" class="small">heute</div>
                            <div data-type="label" class="small">gestern</div>
                            <div data-type="label" class="small">Monat</div>
                            <div data-type="label" class="small">Vormonat</div>
            </div>
            <div class="col-1-4 left-align">
                    <div data-type="label" data-device="Heizkessel" data-get="statBrennerDay" data-part=".*an:\s(.*)\san_Count.*" class="small"></div>
                    <div data-type="label" data-device="Heizkessel" data-get="statBrennerDayLast" data-part=".*an:\s(.*)\san_Count.*" class="small"></div>
                    <div data-type="label" data-device="Heizkessel" data-get="statBrennerMonth" data-part=".*an:\s(.*)\san_Count.*" class="small"></div>
                    <div data-type="label" data-device="Heizkessel" data-get="statBrennerMonthLast" data-part=".*an:\s(.*)\san_Count.*" class="small"></div>
            </div>
        </div>
    </section>


[klausw]

super danke, ich dachte center bezieht sich auf das horizontale

[klausw]

Bekomme ich die Spinner irgerndwie kleiner?
Wenn ich im Mozilla Inspektor die width des Spinner Elements auf 100% setze dann passt es. (200px ist auf meinem Handy etwas zu breit)
Dieser code will aber nicht:

Code Auswählen Erweitern

<div class="col-1-2">
       <div data-type="spinner"
              data-device="Thermostat_Wohnzimmer_Clima" data-get="desired-temp" data-set="desired-temp"
              data-background-color="#d3e0e5"
              data-min="4" data-max="30" data-step="0.5" data-unit="°"
              class="large valueonly" style="width:100%;></div>
</div>

[setstate]

Defaults sind

Code Auswählen Erweitern


data-width="200'"
data-height="50"


die kannst du überschreiben ...

[klausw]

ah ok
Danke

in "%" geht das aber nicht?

Edit:
mit "auto" funktioniert es ... war wohl gestern zu müde