Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[jwerlsdf]

Hallo,
ich nutze das "basic - ValueList HTML Style" widget und wollte abhängig von den Werten einen Rahmen in der entsprechenden Farbe haben. Das funktioniert auch soweit, aber leider ist der Rahmen nur zur Hälfte zu sehen (BIld 1). Wenn ich die Werte jedoch bei CSS-Ränder (Border) eingebe, dann sehe ich den Rahmen vollständig (Bild 2). Leider kann ich aber ja nur eine Farbe anstatt 5 angeben. Ich habe mal zwei Bilder hochgeladen, um mein Problem zu verdeutlichen.
Die Werte für den Stil 5 ist wie folgt angegeben:

border-color:red; border-radius:20px; border-style:solid; border-width:5px



[jwerlsdf]

Ok. Mithilfe von bindings habe ich es nun bei CSS Ränder gelöst. Aber auf das eigentliche Problem, wie oben beschrieben, habe ich keine Antwort gefunden.

Falls es jemand als Beispiel braucht, um verschiedene Farben einzubinden:

{val:0_userdata.0.PV.VIS-Rahmen; val==1? "green": val==2? "orange": val==3? "blue": val==4? "yellow": val==5? "red": "green"}

[OliverIO]

@jwerlsdf

Exportiere bitte mal das Widget

[jwerlsdf]

[{"tpl":"tplValueListHtml8","data":{"oid":"0_userdata.0.PV.VIS-Rahmen","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"count":"5","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"name":"Rahmen","value2":"2","value3":"4","value5":"0","value6":"Seitenbrüste blockiert","value7":"Festgefahren","value8":"Blockiert","html_prepend":"","style5":"border-color:red; border-radius:20px; border-style:solid; border-width:5px","style6":"color: red","test_list":"","style2":"border-color:red; border-radius:20px; border-style:solid; border-width:5px","value0":"1","value1":"5","value4":"3","value9":"Staubbehälter fehlt","value10":"Filter reinigen","value11":"Steckt in magn. Barriere","style0":"border-color:red; border-radius:20px; border-style:solid; border-width:5px","style7":"color: red","style8":"color: red","style3":"border-color:red; border-radius:20px; border-style:solid; border-width:5px","style1":"border-color:red; border-radius:20px; border-style:solid; border-width:5px","style4":"border-color:red; border-radius:20px; border-style:solid; border-width:5px","style9":"color: red","style10":"color: red","style11":"color: red","value12":"Batterie leer","value13":"Ladefehler","value14":"Batterie Fehler","value15":"Wand-Sensoren dreckig","value16":"Ebene Fläche benötigt","value17":"Seitenbürsten Problem","value18":"Sauggebläse Problem","value19":"Ladestation nicht angeschlossen","style12":"color: red","style13":"color: red","style14":"color: red","style15":"color: red","style16":"color: red","style18":"color: red","style17":"color: red","style19":"color: red","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"899px","top":"1152px","width":"159px","height":"201px","z-index":"10","color":"black","text-align":"center","font-variant":"normal","font-weight":"normal","border-width":"3px","border-style":"solid","border-color":"","border-radius":"10px"},"widgetSet":"basic"}]

[OliverIO]

@jwerlsdf

vis verwendet kein border-box model, daher ist das mit rändern immer etwas schwierig. insbesondere dann, wenn innerhalb des elements ein weiteres element mit height und width 100% definiert wird.
im klassischen box modell wird der rand immer auf die 100% dazugerechnet. da hier aber alles überlappende abgeschnitten wird, ist der rand nicht sichtbar.
im border-box model wird der rand in die 100% mit eingerechnet.

daher am besten bei style[0]

das folgende angeben

box-sizing:border-box;border: 3px solid red;border-radius:20px

die anderen Eisntellungen bei css Border würde ich entfernen. die sind doppelt gemoppelt und könnten komische effekte erzeugen.

das lässt dann den browser das richtig berechnen.

[jwerlsdf]

Vielen Dank! Hat funktioniert.