Hallo HTML/CSS-Kenner
Meine funktionierende Tablet UI hat seit einiger Zeit (ohne bewusste Änderung) ein paar Layout-Fehler.
Ich verstehe leider nicht, warum. Ich vermute es liegt am CSS, habe aber leider keine Ahnung davon.
Könnt Ihr mir helfen?
Problem 1: Slider "fehlt"
Anscheinend ist die Position des Sliders zu weit rechts. Bisher war der immer sauber platziert. Auf dem Handy sehe ich ihn (komischerweise) teilweise ganz rechts angedeutet.
vgl. Bild dazu
Hier das betroffene Template:
<!-- Helligkeit -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="mi-brightness_5" data-color="#aaaaaa" class="big compressed"></div>
</div>
<div class="cell left-align left-space">
<div class="big">Dimmen</div>
<div data-type="label" data-device="var_device" data-get="pct" data-unit="%"></div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider" data-device="var_device" data-get="pct" data-set="pct" class="horizontal blue"></div>
</div>
</div>
</section>
Ich habe eine ftui_slider.css.
Ist die dafür verantwortlich?
Sieht so aus:
[data-type="level"],
[data-type="slider"] {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.vertical .slider-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.horizontal.value-right .slider-wrapper {
margin-left: -1.5em;
}
.range-container.slider_vertical.narrow, .range-container.level_vertical.narrow {
margin: 10px 0px 0px -5px !important;
}
.range-container.slider_horizontal.narrow, .range-container.level_horizontal.narrow {
padding-bottom: 5px;
}
.range-min, .range-max {
visibility: hidden;
width: 0px !important;
margin-right: 40px;
}
.slider_vertical .slidertext, .level_vertical .slidertext {
margin-top: 10px;
width: 40px;
text-align: center;
}
.range-container {
position: relative;
}
.slider_horizontal .slidertext-right, .level_horizontal .slidertext-right {
position: absolute;
right: -1.5em;
line-height: 2em;
}
.big>.vertical .range-bar {
width: 1em;
}
.bigger>.vertical .range-bar {
width: 25px;
}
.large>.vertical .range-bar {
width: 50px;
}
Problem 2: Bei einigen Icons wird ein viel zu großer Kreis angezeigt
Wie im 2. Screenshot zu sehen, wird auf einmal ein viel zu großer Kreis angezeigt.
So sieht mein Template aus:
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template Licht Szenzen mit Modul Lightscene-->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["((?!var_state).)*","var_state"]' data-colors='["gray","green"]' data-icon="mi-lightbulb_outline" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
</div>
<div class="cell">
</div>
<div class="cell right-align right-space">
<div data-type="push" data-device="var_device" data-set-on="scene var_state" data-get-on="var_state" data-background-icon="mi-swap_vert" data-icon="" class="small"></div>
</div>
</div>
</body>
</html>
Vielleicht ist das auch wichtig:
So sieht meine fhem-tablet-ui.css muss ich mal anhängen, da sie nicht hier reinpasst.
So den Sliderteil habe ich doch lösen können.
Trotzdem komisch, warum das auf einmal anders aussieht, ohne, dass ich etwas geändert habe.
Habe im Template nun eine Zelle rausgenommen und es so aufgebaut:
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="mi-brightness_5" data-color="#aaaaaa" class="big compressed"></div>
</div>
<div class="cell left-align left-space">
<div class="big">Dimmen</div>
<div data-type="label" data-device="var_device" data-get="pct" data-unit="%"></div>
</div>
<div class="cell-60 right-space">
<div data-type="slider" data-device="var_device" data-get="pct" data-set="pct" class="horizontal blue"></div>
</div>
</div>
</section>
Ergebnis im Anhang.
So, nun benötige ich nur noch Hilfe, wie ich die Kreise um die Icons wegbekomme.
Hier scheinen sich symbol und push zu unterscheiden.
Das oberste Icon im Screenshot ist mit dem symbol-Widget erstellt:
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="fa-paint-brush" data-color="var_device_hue_einzel_farbe:rgb" class="big compressed"></div>
</div>
die anderen mit dem push-Widget:
<div class="cell-10 left-align left-space">
<div data-type="push" data-device="var_device_lightscene" data-set="scene" data-set-on="Energietanken" data-icon="fa-paint-brush" data-color="#e8ecff" class="big compressed"></div>
</div>
gelöst!
Ein
data-background-icon=""
hat geholfen.
Im Standard wird wohl "fa-circle-thin" gesetzt, wenn man das nicht angibt.
Warum der Kreis so riesig geworden ist, kann ich aber nicht nachvollziehen.