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?
<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>
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
<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
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?
<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>
super danke, ich dachte center bezieht sich auf das horizontale
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:
<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>
Defaults sind
data-width="200'"
data-height="50"
die kannst du überschreiben ...
ah ok
Danke
in "%" geht das aber nicht?
Edit:
mit "auto" funktioniert es ... war wohl gestern zu müde