FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: drhirn am 18 Februar 2019, 15:00:07

Titel: Slider-Widget mit data-handle-diameter nicht mehr zentriert
Beitrag von: drhirn am 18 Februar 2019, 15:00:07
Hi,

für meine Wurstfinger brauche ich einen etwas größeren Slider. Sobald ich aber einen Wert für data-handle-diameter angebe, lässt sich das ganze Widget nicht mehr vertikal zentrieren. Bzw. ist ein vertikaler Slider dann überhaupt verschoben. Beispiel im Anhang.
Bin ich der einzige mit dem Problem?

Hier der Code zum Bild:

<div style="display: flex; flex-flow: row wrap; padding: 1em; align-items: center; background: gray;">
<div style="flex: 0 0 auto; align-self: left; text-align: left;">WoZi01WW</div>
<div data-type="slider"
data-device="HUEDevice2"
data-get="pct"
data-min="0"
data-max="100"
data-handle-diameter="40"
class="horizontal tap"
style="flex: 0 0 auto; align-self: left;"></div>
<div data-type="symbol"
data-get="pct"
data-device="HUEDevice2"
data-get-on="!off"
data-get-off="0"
style="flex: 0 0 auto; text-align: right;"></div>
</div>
<div style="background: gray;">
<div>WoZi01WW</div>
<div data-type="slider"
data-device="HUEDevice2"
data-get="pct"
data-min="0"
data-max="100"
data-handle-diameter="40"
class="vertical tap"></div>
<div data-type="symbol"
data-get="pct"
data-device="HUEDevice2"
data-get-on="!off"
data-get-off="0"></div>
</div>
<div style="display: flex; flex-flow: row wrap; padding: 1em; align-items: center; background: gray;">
<div style="flex: 0 0 auto; align-self: left; text-align: left;">WoZi01WW</div>
<div data-type="slider"
data-device="HUEDevice2"
data-get="pct"
data-min="0"
data-max="100"
class="horizontal tap"
style="flex: 0 0 auto; align-self: left;"></div>
<div data-type="symbol"
data-get="pct"
data-device="HUEDevice2"
data-get-on="!off"
data-get-off="0"
style="flex: 0 0 auto; text-align: right;"></div>
</div>


Lässt sich da etwas machen?

Danke!
Stefan
Titel: Antw:Slider-Widget mit data-handle-diameter nicht mehr zentriert
Beitrag von: setstate am 19 Februar 2019, 07:24:21
Position für den vertikalen Slider ist jetzt korrigiert. Update ist hochgeladen.

Kleiner Tipp noch:

Man kann auch nur  data-touch-diameter angeben, dann ändert sich die Handle-Größe nur beim Touch/Klick.

Die Mittellage für den horizontalen Slider ist aber noch abhängig von der Handle-Größe. Das muss ich auch noch optimieren.
Titel: Antw:Slider-Widget mit data-handle-diameter nicht mehr zentriert
Beitrag von: drhirn am 19 Februar 2019, 13:39:18
Bis data-touch-diameter greift, habe ich schon daneben gegriffen ;D

Der vertikale Slider tut, auf den horizontalen kann ich warten.

Danke dir!