Hi, ich versuche mich gerade an einem Design, welches nicht auf dem typischen Grid aufgebaut ist.
Da sich das Ganze dynamisch an die Browsergröße anpasst, muss ich zur Zeit die Breite für das kleinste Gerät (Handy) auf allen Geräten verwenden, sonst wird der Slider auf kleineren Geräten abgeschnitten.
Bekommt man das irgendwie hin, dass die Größe sich an das umgebende Div anpasst mit entsprechenden Abständen zum Rand,
statt fixer Breite?
Im Moment gibt es ja nur data-width="200" welches automatisch als Pixel interpretiert wird.
Ok, hab zumindest mal gefunden woran es liegt.
@setstate in widget_slider.js setzt du da händisch ein px dahinter:
if (elem.hasClass('horizontal')) {
if (elem.data('width')) {
rangeContainer.css({
'width': elem.data('width') + 'px',
'max-width': elem.data('width') + 'px',
'height': '0px'
});
}
Wenn ich das "+ 'px' wegnehme, kann ich auch mit % arbeiten.
Stecke ich nun den Slider in einen Container der mir den Slider richtig platziert, kann ich mit data-width="100%" meine gewünschtes Responsive Verhalten realisieren.
(Die Doku auf schreibt ja auch, dass man das "px" selbst händisch anfügen muss. Das schreibt ja förmlich nach einer Anpassung der JS Datei. ;))
Einziges Problem: Der Slider Background zeichnet sich beim Resizen dann zwar in der richtigen Größe neu, der Füllstand und der "Handle" zum bewegen bleiben aber an der Stelle stehen.
Bin jetzt nicht so der Webentwickler, aber denkst du das würde man hinbekommen, dass sich der Slider komplett neu/richtig positioniert?
edit: Damit man sieht was ich erreichen will, hier der Testcode auf einer Seite mit Bootstrap:
<div class="row">
<div class="col-xs-6 text-center">
<div data-type="slider" data-device="HUEDevice1" data-get="pct" data-set-value="pct $v" data-min="0" data-max="100" data-width="100%" class="horizontal center"></div>
</div>
</div>
Das Slider Widget ist jetzt angepasst. Es kann nun auch prozentuale Weite und Breite verarbeiten.
<div data-type="slider" data-device="dummy1" data-max="100" data-width="45%" class="horizontal right-align"></div>
Es geht auch: data-width="120px" oder data-width="120"
Meine Test-Beispiele siehe hier:
https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_slider.html
Auch flexible Breite ist jetzt möglich. Auf die Fensterbreite wird reagiert. Tests siehe hier:
https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_slider_flex.html
Super, vielen Dank. :)
Wird Morgen gleich getestet.