Grösste Probleme mit Auflösung, Widget-Breiten usw.

[Homoran]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Aber wenn ich dann Leute hören, die sagen "Das war schon immer so", dann, na ja.

Bitte keine Aussagen verdrehen!

Firefox hat schon immer die CSS anders interpretiert als Chrome!

[Delphinis]

@homoran
Sorry, dann hab ich das falsch verstanden. Aber es war für mich nicht ersichtlich, dass du das in Zusammenhang mit Firefox gesagt hast. Diese Antwort war nämlich:

@oliverio sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:
da stimmt schon was nicht.
"ist bereits seit Jahren so."

Aber Firefox reagiert gerade in diesem Zusammenhang nicht viel anders als der Edge. Andere Weiss ich nicht. Aber die waren ja am meisten auseinander

[Homoran]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Diese Antwort war nämlich:

ein Herausreissen aus dem vollen Zusammenhang macht es nicht besser.
diese Aussage von @OliverIO bezog sichvauf meinen Post zuvor

@homoran sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

tritt nur (?) bei Firefox auf.
Rahmen des Charts und Hintergrund haben gleiche Höhe.
Edge, chrome, Ecosia
alles in Ordnung

und wenn das

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

sprich gleiche paddings (am besten so klein wie möglich, da fürs Handy meist wenig Platz), gleiche Schriftgrösse usw.

für dich im Gegensatz zu 80.000 anderen Usern ein Problem ist, kannst du mit minimalem "Aufwand" wahlweise alle Widgets per Gummiband selektieren und mit einer einzigen Einstellung einheitliche Einstellungen in allen selektierten Widgets erzeugen, oder erst einmal ein Widget nach deinem Gusto konfigurieren und dann klonen.

Diese Aussage

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Es gibt unzählige Widgets welche nicht richtig funktionieren

ist seltsamerweise weder belegt, noch hat einer der genannten 80.000 Usern in den letzten 10 Jahren ähnliches behauptet.

Auch finde ich diesbezüglich kein einziges Issue von dir.

[OliverIO]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Und die ist nicht gleich

dann mein review komplett lesen.
den einen punkt hast du dann verpasst

[OliverIO]

@homoran sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Firefox hat schon immer die CSS anders interpretiert als Chrome!

aber nur im rahmen der interpretationsmöglichkeit des w3c.
es gibt einen standardisierten test (acid-test, sehe gerade, den gibt esseit 10 jahren nicht mehr),
der das überprüft. meist werden die punkte dann in einem späteren release
der renderengine behoben, bzw. wurch das w3c konsortium mit in den standard eingebracht.
so groß sind die unterschiede nicht. ggfs. ist auch chromium schneller in der umsetzung von ganz neuen experimentiellen features wie mozilla. das liegt halt auch an der größzügigen unterstützung von google.
aber, hm, der größte geldgeber von mozilla ist ja auch google, hm (kleiner fun-fact am rande)

[Homoran]

@oliverio Aber zumindest die mobile Version wird immer schlimmer was die Grafik angeht.
seit paar Monaten habe ich andauernd Artefakte in den Charts

[Delphinis]

@oliverio
Wie hast du das geschafft?

Kannst du mir die Widgets exportieren?

[OliverIO]

@delphinis

in dem du mein review genau und bis zum ende liest.

speziell diesen punkt

Position ist je nach widget anders, obwohl alle die selbe PosX oder PosY haben.
-> ja korrekt die widgets mit 1TG und > haben noch ein padding von 10 eingestellt. wenn du das löscht, dann sind alle auf der richtigen top position.
das padding ist in den vis properties drin. das hast du wahrscheinlich selber eingegeben

Spoiler

[{"tpl":"tplJquiButtonNav","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","buttontext":">","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,"nav_view":"13hbat_"},"style":{"left":"412px","top":"238px","padding":"","width":"53px","height":"21px","font-size":"x-small"},"widgetSet":"jqui"},{"tpl":"tplJquiSelectList","data":{"oid":"javascript.0.Vis.Flot.solarTimeRange","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"values":"1440;2880;4320;10080;20160;40320","texts":"1Tg;2Tg;3Tg;7Tg;14Tg;28Tg","height":"220","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,"open":true,"no_style":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"328px","top":"238px","width":"67px","height":"21px","padding":"","font-size":"x-small","font-weight":"bold"},"widgetSet":"jqui"},{"tpl":"tplJquiSelectList","data":{"oid":"javascript.0.Vis.Flot.batSensor","g_fixed":false,"g_visibility":true,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"values":"alias.0.TH-Heizregler;\nalias.0.TH-Bar;\nalias.0.TH-Bureau;\nalias.0.TH-Bad;\nalias.0.TH-SchlzRaum;\nalias.0.TH-SchlzWand;\nalias.0.TH-OutHolzunterstand;\nalias.0.TH-OutNO;\nalias.0.TH-OutSW;\nalias.0.TH-Garage;\nalias.0.TH-Weinkeller;\nalias.0.TH-Werkraum;\nalias.0.TH-Kuehl_In;\nalias.0.TH-Tiefkuehl;\nalias.0.TH-HeizVorlauf;\nalias.0.TH-HeizRuecklauf;\nalias.0.TH-HeizBoiler;","texts":"Heizregler;\nBar;\nBüro;\nBad;\nSchlafzimmer Raum;\nSchlafzimmer Wand;\nHolzunterstand;\nAussen NO;\nAussen SW;\nGarage;\nWeinkeller;\nWerkraum;\nKühlschrank;\nTiefkühler;\nVorlauf;\nRücklauf;\nBoiler;","height":"215","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,"open":true,"no_style":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"157px","top":"238px","width":"145px","height":"21px","padding":"","font-size":"x-small","z-index":"","overflow-x":""},"widgetSet":"jqui"}]

[OliverIO]

@homoran sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Aber zumindest die mobile Version wird immer schlimmer was die Grafik angeht.
seit paar Monaten habe ich andauernd Artefakte in den Charts

das müsste man sich genau anschauen.
wie gesagt spielen manchmal andere adapter da übel rein.
am besten mal in einer separaten installation testen, mit möglichst wenigen vis-adaptern.
ansonsten über die web developer tools versuchen das artefakt zu identifizieren und schauen welche css anweisung da reinspielt und analog solchen anweisungen wie hier im thread zu neutralisieren, geht aber nicht immer

[Delphinis]

@oliverio said in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

das padding ist in den vis properties drin. das hast du wahrscheinlich selber eingegeben

Upps.

Wie hast du denn die Höhen ausgeglichen? Mit CSS?
Wenn ich nämlich ein value-list und ein Button jungfräulich reinziehe bekomme ich das:

So, hab die Widgets wieder importiert.
Bei mir aber wieder abgeschnitten:
Editor:

Runtime:

Scheint bei mir einfach nicht zu tun. Hab aber mittlerweile fast alle vis-Adapter deinstalliert. iobroker gestoppt und wieder gestartet.
Dann bleibt mir wohl nichts anderes übrig als all die vielen css regeln durchzuackern und rumzupröbeln...

[OliverIO]

@delphinis

ich glaube ich hör jetzt auf. bzw ich gebe dir mal noch bis morgen
mein review detailliert zu lesen. wenn du da was nicht verstehst, dann frage nach.

mach aber bitte nicht so weiter als ob ich nix geschrieben habe.
um die größe korrekt einzustellen, stelle das dropdown bitte auf den längsten wert ein

unterschied zwischen runtime/editor habe ich nicht

[OliverIO]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Wenn ich nämlich ein value-list und ein Button jungfräulich reinziehe bekomme ich das:

über die css-properties von vis.
einfach für beide die gleiche höhe einstellen?

[OliverIO]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

value-list

wenn ich etwas ausprobieren soll, dann bitte widgetbezeichnung (+ggfs adapter) exakt angeben
unter value-list finde ich nix oder noch besser: exportieren

[Delphinis]

@oliverio
Sorry -> tplJquiSelectList

Aber ich glaube es hat wirklich keinen Sinn, ich weiss nicht was los ist bei mir. Es funktioniert einfach nicht. Ich glaube wir hören einfach auf. Wir haben offenbar irgendwie nicht das selbe iobroker-system.

[Homoran]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

ich weiss nicht was los ist bei mir.

ich gehe davon aus, dass bei dir ein Zeilenumbruch reinpfuschst.
deshalb sollst du ja

@oliverio sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

um die größe korrekt einzustellen, stelle das dropdown bitte auf den längsten wert ein

incl. eventueller margins.

deswegen fragte ich bereits sehr früh

@homoran sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

wieviel Text hast du?
passt der bei der gewählten Schriftgröße da vollständig rein?

die Antwort

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Der längste Text ist im Widget automatisch ausgewählt

ist irgendwie keine

[Delphinis]

@homoran
Glaube nicht dass es das ist. Hab das schon zig mal versucht. Hier noch einmal:
Der Längste Text im Dropdown ist "Schlafzimmer Wand". Damit mir nicht noch ein Leerschlag reinpfuscht, hab ich den rausgenommen.
Editor:

Ich hoffe das ist breit genug.

Runtime:

Spoiler

[{"tpl":"tplJquiSelectList","data":{"oid":"javascript.0.Vis.Flot.batSensor","g_fixed":false,"g_visibility":true,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"values":"alias.0.TH-Heizregler;\nalias.0.TH-Bar;\nalias.0.TH-Bureau;\nalias.0.TH-Bad;\nalias.0.TH-SchlzRaum;\nalias.0.TH-SchlzWand;\nalias.0.TH-OutHolzunterstand;\nalias.0.TH-OutNO;\nalias.0.TH-OutSW;\nalias.0.TH-Garage;\nalias.0.TH-Weinkeller;\nalias.0.TH-Werkraum;\nalias.0.TH-Kuehl_In;\nalias.0.TH-Tiefkuehl;\nalias.0.TH-HeizVorlauf;\nalias.0.TH-HeizRuecklauf;\nalias.0.TH-HeizBoiler","texts":"Heizregler;\nBar;\nBüro;\nBad;\nSchlafzimmerRaum;\nSchlafzimmerWand;\nHolzunterstand;\nAussenNO;\nAussenSW;\nGarage;\nWeinkeller;\nWerkraum;\nKühlschrank;\nTiefkühler;\nVorlauf;\nRücklauf;\nBoiler","height":"215","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,"open":true,"no_style":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"12px","top":"18px","width":"489px","height":"28px","padding":"","font-size":"","z-index":"","overflow-x":""},"widgetSet":"jqui"}]

Aber vielleicht ist es doch irgendein Adapter, der reinspielt. Trotz Deinstallation (Abfallkübel in den Instanzen) sind die Widgets noch da. Hab aber den iob schon neu gestartet. Ich weiss nicht wie ich die sonst noch rausbringen kann.

[FredF]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Trotz Deinstallation (Abfallkübel in den Instanzen)

Dann ist doch "nur" die Instanz gelöscht, der (oder die) Adapter aber noch installiert.

Probiere mal über den Reiter Adapter zu deinstallieren

[Homoran]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

Aber vielleicht ist es doch irgendein Adapter,

insbesondere auf einen Widget Adapter aus dem Beta-Bereich, der möglicherweise das ganze CSS verbiegt solltest du achten.

[OliverIO]

@delphinis sagte in Grösste Probleme mit Auflösung, Widget-Breiten usw.:

ja da scheint irgendwas reinzupfuschen
bei mir sind im edit/runtime mode beide identisch

[OliverIO]

jetzt mal was ganz wildes und was seeeeeeehr kleinteiliges. mal schauen ob das dich nicht überfordert.

wir haben festgestellt, das da irgendwas ist, was da reinpfuscht. im folgenden bild habe ich mal die oberste ebene des widgets markiert

im unterne bereich sieht man dann die einzelnen html elemente
ein div als widget container
ein div mit vis-widget-body
dann ein select
ein button
erstes span (das sind die kleinen pfeilchen der selektbox auf der rechten seite).
zweites span (der ausgewählte text)

wir vergleichen nun der reihe nach die css-anweisungen. dazu schaue ich zuerst beim obersten element auf der rechten seite. da stehen alle css elemente die genau auf dieses html element wirkt. viele davon sind von einer höheren ebene vererbt, aber dennoch kann es sich da auch drin verstecken.
was ich im folgenden nicht kopiere sind die css bei denen useragent dran steht. das sind die einstellungen die der browserhersteller vorgibt und sozusagen die baseline der ansicht darstellt
ich musste sie doch mitkopieren, da sie manchmal dazwischen standen,

du darfst jetzt analog für jedes element dir im browser die css anweisung anschauen (die useragent styles kannst du überspringen) und dann die differenzen hier melden

ach ja, als theme habe ich hier nun redmond eingestellt. das ist das blaue.
ansonsten wären bei einigen anweisungen andere farben oder farbverläufe zu finden.
bitte schau genau. primär aber auch abweichende padding oder margin anweisungen. width könnte es auch sein. aber lieber alles abgleichen, da es da auch tücken gibt

zu der Ansicht kommst du in chrome/firefox mit F12
das tool zum ungefähren auswählen des html elements sieht so aus

erstes div

Spoiler

element.style {
    left: 52px;
    top: 304px;
    width: 489px;
    height: 28px;
}
.vis-widget {
    position: absolute;
    overflow: hidden;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
#vis_container {
    font-family: Arial, sans-serif;
}
body, html {
    font-style: normal;
    font-stretch: normal;
    text-shadow: none;
    text-transform: none;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-indent: 0;
    display: inline-block;
    text-align: start;
    font: 1em Arial;
}

zweites div

Spoiler

element.style {
}
.vis-widget-body {
   width: 100%;
   height: 100%;
}
user agent stylesheet
div {
   display: block;
   unicode-bidi: isolate;
}
#vis_container {
   font-family: Arial, sans-serif;
}
body, html {
   font-style: normal;
   font-stretch: normal;
   text-shadow: none;
   text-transform: none;
   text-rendering: auto;
   color: initial;
   letter-spacing: normal;
   word-spacing: normal;
   text-indent: 0;
   display: inline-block;
   text-align: start;
   font: 1em Arial;
}

select

Spoiler

element.style {
   display: none;
}
user agent stylesheet
select:not(:-internal-list-box) {
   overflow: visible !important;
}
user agent stylesheet
select:not(:-internal-select-author-button) {
   appearance: auto;
   box-sizing: border-box;
   align-items: center;
   -webkit-rtl-ordering: logical;
   color: fieldtext;
   background-color: field;
   cursor: default;
   white-space: pre;
   border-width: 1px;
   border-style: solid;
   border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
   border-image: initial;
   border-radius: 0px;
}
user agent stylesheet
select {
   font-style: ;
   font-variant-ligatures: ;
   font-variant-caps: ;
   font-variant-numeric: ;
   font-variant-east-asian: ;
   font-variant-alternates: ;
   font-variant-position: ;
   font-weight: ;
   font-stretch: ;
   font-size: ;
   font-family: ;
   font-optical-sizing: ;
   font-kerning: ;
   font-feature-settings: ;
   font-variation-settings: ;
   text-rendering: auto;
   color: fieldtext;
   letter-spacing: normal;
   word-spacing: normal;
   line-height: normal;
   text-transform: none;
   text-indent: 0px;
   text-shadow: none;
   display: inline-block;
   text-align: start;
   margin: 0em;
}
#vis_container {
   font-family: Arial, sans-serif;
}
body, html {
   font-style: normal;
   font-stretch: normal;
   text-shadow: none;
   text-transform: none;
   text-rendering: auto;
   color: initial;
   letter-spacing: normal;
   word-spacing: normal;
   text-indent: 0;
   display: inline-block;
   text-align: start;
   font: 1em Arial;
}

und der button

Spoiler

element.style {
   width: 487.6px;
}
.ui-multiselect {
   padding: 2px 0 2px 4px;
   text-align: left;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
   border-bottom-right-radius: 5px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
   border-bottom-left-radius: 5px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
   border-top-right-radius: 5px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
   border-top-left-radius: 5px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   border: 1px solid #c5dbec;
   background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
   font-weight: bold;
   color: #2e6e9e;
}
.ui-widget {
   font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
   font-size: 1.1em;
}
user agent stylesheet
button {
   appearance: auto;
   font-style: ;
   font-variant-ligatures: ;
   font-variant-caps: ;
   font-variant-numeric: ;
   font-variant-east-asian: ;
   font-variant-alternates: ;
   font-variant-position: ;
   font-weight: ;
   font-stretch: ;
   font-size: ;
   font-family: ;
   font-optical-sizing: ;
   font-kerning: ;
   font-feature-settings: ;
   font-variation-settings: ;
   text-rendering: auto;
   color: buttontext;
   letter-spacing: normal;
   word-spacing: normal;
   line-height: normal;
   text-transform: none;
   text-indent: 0px;
   text-shadow: none;
   display: inline-block;
   text-align: center;
   align-items: flex-start;
   cursor: default;
   box-sizing: border-box;
   background-color: buttonface;
   margin: 0em;
   padding-block: 1px;
   padding-inline: 6px;
   border-width: 2px;
   border-style: outset;
   border-color: buttonborder;
   border-image: initial;
}
#vis_container {
   font-family: Arial, sans-serif;
}
body, html {
   font-style: normal;
   font-stretch: normal;
   text-shadow: none;
   text-transform: none;
   text-rendering: auto;
   color: initial;
   letter-spacing: normal;
   word-spacing: normal;
   text-indent: 0;
   display: inline-block;
   text-align: start;
   font: 1em Arial;
}

erstes span

Spoiler

element.style {
}
.ui-multiselect span.ui-icon {
   float: right;
}
.ui-state-default .ui-icon {
   background-image: url(images/ui-icons_6da8d5_256x240.png);
}
.ui-icon-triangle-2-n-s {
   background-position: -128px -16px;
}
.ui-icon, .ui-widget-content .ui-icon {
   background-image: url(images/ui-icons_469bdd_256x240.png);
}
.ui-icon {
   width: 16px;
   height: 16px;
}
.ui-icon {
   display: block;
   text-indent: -99999px;
   overflow: hidden;
   background-repeat: no-repeat;
}
.ui-multiselect {
   padding: 2px 0 2px 4px;
   text-align: left;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   border: 1px solid #c5dbec;
   background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
   font-weight: bold;
   color: #2e6e9e;
}
.ui-widget {
   font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
   font-size: 1.1em;
}
user agent stylesheet
button {
   font-style: ;
   font-variant-ligatures: ;
   font-variant-caps: ;
   font-variant-numeric: ;
   font-variant-east-asian: ;
   font-variant-alternates: ;
   font-variant-position: ;
   font-weight: ;
   font-stretch: ;
   font-size: ;
   font-family: ;
   font-optical-sizing: ;
   font-kerning: ;
   font-feature-settings: ;
   font-variation-settings: ;
   text-rendering: auto;
   color: buttontext;
   letter-spacing: normal;
   word-spacing: normal;
   line-height: normal;
   text-transform: none;
   text-indent: 0px;
   text-shadow: none;
   text-align: center;
   cursor: default;
}
#vis_container {
   font-family: Arial, sans-serif;
}
body, html {
   font-style: normal;
   font-stretch: normal;
   text-shadow: none;
   text-transform: none;
   text-rendering: auto;
   color: initial;
   letter-spacing: normal;
   word-spacing: normal;
   text-indent: 0;
   display: inline-block;
   text-align: start;
   font: 1em Arial;
}

zweites span

Spoiler

element.style {
}
.ui-multiselect {
   padding: 2px 0 2px 4px;
   text-align: left;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   border: 1px solid #c5dbec;
   background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
   font-weight: bold;
   color: #2e6e9e;
}
.ui-widget {
   font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
   font-size: 1.1em;
}
user agent stylesheet
button {
   font-style: ;
   font-variant-ligatures: ;
   font-variant-caps: ;
   font-variant-numeric: ;
   font-variant-east-asian: ;
   font-variant-alternates: ;
   font-variant-position: ;
   font-weight: ;
   font-stretch: ;
   font-size: ;
   font-family: ;
   font-optical-sizing: ;
   font-kerning: ;
   font-feature-settings: ;
   font-variation-settings: ;
   text-rendering: auto;
   color: buttontext;
   letter-spacing: normal;
   word-spacing: normal;
   line-height: normal;
   text-transform: none;
   text-indent: 0px;
   text-shadow: none;
   text-align: center;
   cursor: default;
}
#vis_container {
   font-family: Arial, sans-serif;
}
body, html {
   font-style: normal;
   font-stretch: normal;
   text-shadow: none;
   text-transform: none;
   text-rendering: auto;
   color: initial;
   letter-spacing: normal;
   word-spacing: normal;
   text-indent: 0;
   display: inline-block;
   text-align: start;
   font: 1em Arial;
}