Material Design Widgets: Input, Select, Autocompl.

[0018]

@Scrounger sagte in Material Design Widgets: Input, Select, Autocompl.:

                                                                                                                            .v-text-field__slot > input {                                                                                                                                                                                text-align: center !important;                                                                                                                                                                            }                                            

müsste aber eigentlich gehen.

@Scrounger leider nein, auf dem Android Tablet und dem Handy bleibt es leider immer noch linksbündig, sogar Browserunabhängig

[Chris_78]

@Scrounger

Ist es möglich den Text in der Höhe zu verschieben bzw. zu zentrieren (Select Widget)?

Wenn ich eine Hintergrundfarbe einstelle, ist der Text zu weit unten. Habe bisher
keine Möglichkeit gefunden das zu korrigieren...

Ohne Hintergrundfarbe passt es:

Mit Hintergrund:

[Chris_78]

Keiner eine Idee wie ich im 2. Bild den Text zentriert zur Hintergrundfarbe bekomme (also einfach den Text etwas höher setzen)?

[Scrounger]

@Chris_78
Du musst die Höhe des Widget vergrößern. Der Text ist immer vertical zentriert.
Oder das Widget per css entsprechend verbiegen.

[Chris_78]

@Scrounger

Die Höhe (30px) ist eigentlich genau die Höhe die ich brauche.
Hast du eine Tipp bzgl. CSS? Bin an der Ecke leider zu wenig/selten unterwegs...

[Scrounger]

@Chris_78
Welches Layout verwendest du da. Laut deinem Screenshot tipp ich auf solo ?

[Chris_78]

@Scrounger

Ich benutze als Layout "regular". War aber schon mal ein guter Hinweis. Mit Solo sieht es schon
besser aus.

oben: regular
unten: solo

Ganz zentriert habe ich allerdings noch nicht hinbekommen

[ice987]

Hallo zusammen,

ich bin seit längerer Zeit am rumprobieren mit dem Widget "materialdesign - input": ich möchte einen Wert eingeben, welcher im folgenden Zahlenformat liegt: "0.1 bis 3500.0". Folgendes habe ich ausprobiert:

• Wenn ich "inputType" = "number" nehme, wird "inputMaxLength" leider nicht berücksichtigt.
• Wenn ich "inputType" = "mask" nehme, kann ich unter "inputMask" Werte gemäss https://vuejs-tips.github.io/vue-the-mask/ (Danke 0018 und Scrounger). Trage ich nun ####.# ein verlangt er (logischerweise) nun immer dieses Format, der Wert 5.9 kann somit nur mit 0005.9 eingetragen werden. Gem. https://vuejs-tips.github.io/vue-the-mask/ können auch mehrere Masken verwendet werden, dies habe ich leider (noch) nicht hingekriegt.

Hat evtl. jemand eine Idee wie dies umgesetzt werden könnte?

[Scrounger]

@ice987 sagte in Material Design Widgets: Input, Select, Autocompl.:

• Wenn ich "inputType" = "number" nehme, wird "inputMaxLength" leider nicht berücksichtigt.

Das sollte eigentlich gehen, evtl. nen Bug. Bitte schreib auf github nen issue dafür, dann schau ich es mir an wenn ich ausm Urlaub zurück bin.

• Wenn ich "inputType" = "mask" nehme, kann ich unter "inputMask" Werte gemäss https://vuejs-tips.github.io/vue-the-mask/ (Danke 0018 uns Scrounger). Trage ich nun ####.# ein verlangt er (logischerweise) nun immer dieses Format, der Wert 5.9 kann somit nur mit 0005.9 eingetragen werden. Gem. https://vuejs-tips.github.io/vue-the-mask/ können auch mehrere Masken verwendet werden, dies habe ich leider (noch) nicht hingekriegt.

müsste so gehen:

'#.#','##.#','###.#','####.#'

[ice987]

Hallo @Scrounger,
Vielen Dank für deine rasche Rückmeldung:

Die folgende Eingabe habe ich auch auch bereits probiert, leider verschwindet dann das Eingabefeld des Widget's "materialdesign - input" und es kann keine Eingabe mehr getätigt werden (iPhone App und Win-Chrome V84.0.4147.105):

'#.#','##.#','###.#','####.#'

sollte beim Widget "materialdesign - Button State Multi vertical" die Textausrichtung unter "CSS Font & Text" -> text-align "left", "right" etc. auch funktionieren? der Text ist immer "center".

Schönen Urlaub!

[Scrounger]

@ice987
Mhh ok das muss ich mir selber anschaue. Schreib bitte nen issue auf GitHub zu beiden Punkten, dann vergess ich es auch nachm Urlaub nicht

[Bostil]

Eine Kleinigkeit @Scrounger - das Uhrsymbol in meinem Input-Widget lässt sich nicht auf eine andere Farbe als schwarz setzen:

Spoiler

[{"tpl":"tplVis-materialdesign-Input","data":{"oid":"javascript.0.Rolladen.Bad.Timer.Hoch_Uhrzeit_WE","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","inputType":"time","inputLayout":"solo","showInputMessageAlways":false,"showInputCounter":false,"clearIconShow":false,"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,"inputMaxLength":"","inputMask":"","inputLayoutBackgroundColor":"","inputLayoutBackgroundColorHover":"","inputLayoutBorderColor":"#dedede","inputLayoutBorderColorHover":"#dedede","inputTextColor":"#dedede","inputLabelText":"","inputMessage":"","inputLayoutBorderColorSelected":"","inputTextFontFamily":"Akrobat","inputTextFontSize":"25","inputLayoutBackgroundColorSelected":"","appendOuterIconColor":"#dedede","appendOuterIcon":"","appendIconColor":"#dedede","prepandInnerIconColor":"#dedede","prepandIconColor":"#dedede","appendIconSize":"","prepandIconSize":"","clearIconColor":"#dedede","inputAppendixFontFamily":"Akrobat","inputLabelFontFamily":"Arkobat","appendOuterIconSize":"","prepandInnerIconSize":"","clearIconSize":"","visibility-oid":"0_userdata.0.Home.Buttonswitch_Mover_expand","inputLabelColor":"#dedede","inputLabelColorSelected":"#dedede","inputAppendixColor":"#dedede","inputMessageColor":"#dedede","inputCounterColor":"#dedede","inputCounterFontSize":"-1"},"style":{"left":"784px","top":"512px","width":"120px","height":"40px","z-index":12,"text-align":"center","box-shadow":"0px 0px 5px 1px rgba(0,0,0,0.5)","font-weight":"lighter","color":"","background":""},"widgetSet":"materialdesign"}]

[Scrounger]

@Bostil sagte in Material Design Widgets: Input, Select, Autocompl.:

Eine Kleinigkeit @Scrounger - das Uhrsymbol in meinem Input-Widget lässt sich nicht auf eine andere Farbe als schwarz setzen:

Steht 10 post weiter oben...
https://forum.iobroker.net/topic/29666/material-design-widgets-input-select-autocompl/91

Das ist chrome spezifisch und ein Bild, deshalb kann man die farbe auch nciht ändern. Per css könnte man ein anderes Bild mit anderer farbe nehmen, mehr infos dazu hier:
https://stackoverflow.com/questions/63002686/how-do-i-change-the-color-of-the-small-clock-icon-that-comes-with-the-html-input

Ich werde das allerdings in der kommenden Version standardmäßig unsichtbar machen.

[ice987]

in einer Visualisierung mittels dem Widget "materialdesign - Line History Chart" lasse ich mir die Aussentemperatur auf dem iPhone-App anzeigen:

leider ist die Breite des iPhones beschränkt und die Daten sind (insbesondere bei der Anzeige von mehreren Tagen in die Vergangenheit) sehr klein. Da kam mir die Idee mittels einer CSS-Anweisung (https://www.smarthome-tricks.de/software-iobroker/iobroker-vis-css-widgets-drehen/) in einer neuen Visualisierung zu drehen. Zu meinem erstaunen funktioniert das alles ganz gut:

unglücklicherweise dreht sich die Auswahlliste im Widget "materialdesign - Select" nicht alles andere funktioniert super!:

gibt's da evtl. eine Lösung um dies ebenfalls zu drehen?

[liv-in-sky]

@Stephan-Schleich sagte in Material Design Widgets: Input, Select, Autocompl.:

@Scrounger Nach dem löschen des widgets gehts nun - danke
Hab nun aber das PRoblem das hinter dem Widget ne Zahl steht, wie krieg ich die weg?

Edit: Hat sich erledit, war der Punkt Zähler anzeigen

hi - was hast du geändert, dass die anzeige klein wird - die höhe ist bei mir immer gleich und verbraucht extrem viel platz

[liv-in-sky]

@Scrounger
Select widget:
irgendwie gehen bei mir nur einige werte zu verändern

z.b layout Eingabe
rot nein
grün kann geändert werden

das ganze so aus:

ich wollte die eingabe auch gerne der ausgabe (tabelle) angleichen- also die blauen select widgets sollen nicht so hoch sein - die brauchen extrem viel platz - ich finde nix, wo sich das ändern läßt

hast du eine idee dazu?

[Scrounger]

@liv-in-sky
Welche Version hast? Also Nummer?

[liv-in-sky]

@Scrounger
hab 0.3.19

[Scrounger]

@liv-in-sky sagte in Material Design Widgets: Input, Select, Autocompl.:

@Scrounger
Select widget:
irgendwie gehen bei mir nur einige werte zu verändern

z.b layout Eingabe
rot nein
grün kann geändert werden

Wird in der nächsten Version behoben sein

ich wollte die eingabe auch gerne der ausgabe (tabelle) angleichen- also die blauen select widgets sollen nicht so hoch sein - die brauchen extrem viel platz - ich finde nix, wo sich das ändern läßt

Das geht leider nicht, die Widgets brauchen eine mindest Höhe damit sie korrekt.
Bleibt nur die Möglichkeit das per css zu verbiegen, ich glaub das hatten wir in diesem Thread auch schon mal.

[liv-in-sky]

@Scrounger

danke dir - ich schau mal nochmal durch den thread - vielleicht find ich das mit dem css