Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Input, Select, Autocompl.

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.4k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.0k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.6k

Material Design Widgets: Input, Select, Autocompl.

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
147 Beiträge 38 Kommentatoren 23.1k Aufrufe 29 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • ScroungerS Scrounger

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

    @Scrounger
    danke das hat soweit geklappt. Allerdings funktioniert das nur auf meinem Win10 Rechner unter Chrome. Auf meinem Andoid-Tablet im Fully-Browser hat das leider keine Änderung gebracht. Hast du eine Idee warum das im Fully nicht klappt?

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

    müsste aber eigentlich gehen.

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

    2020-06-23_07h35_10.png

    @Scrounger

    weißt du das vielleicht?

    Ne leider nicht, wie hast du denn diese Uhr da rein bekommen?

    S Offline
    S Offline
    saeft_2003
    Most Active
    schrieb am zuletzt editiert von saeft_2003
    #88

    @Scrounger

    @Scrounger

    weißt du das vielleicht?

    Ne leider nicht, wie hast du denn diese Uhr da rein bekommen?

    Wenn ich das wüsste, ist die "Uhr" kein Bestandteil von deinem Input widget?

    Edit: Sorry habe gerade erst die Aufklärung von conquest gelesen. Würde mich aber auch interessieren ob man die Uhr entfernen kann, ich nutze für meine VIS auch chrome.

    1 Antwort Letzte Antwort
    0
    • D3ltoroxpD Offline
      D3ltoroxpD Offline
      D3ltoroxp
      schrieb am zuletzt editiert von D3ltoroxp
      #89

      Guten Abend,
      ich bräuchte hier mal Hilfe.

      Ich bastel mir grad ne View, um meinen Mähroboter zu steuern. Hierfür wollte ich mal das Input Widget testen. So sieht die Config aus.

      dsafafd.PNG

      Und so der Eintrag unter Objekten.

      f9d8ca84-f0f2-4838-8bbe-f4077911ebe4-image.png

      Eigentlich bräuchte ich dort 20:00 oder 20:15 usw. Wenn ich in der VIS dann was eintrage, oder aus dem Drop Down Menu wähle, wird nur Stunden übertragen.

      9b26f411-96c0-41e1-bad2-78dc0a5acef2-image.png

      Muss ich da beim inputmask eintragen ? Hab dort schon hh:mm probiert, aber hat nichts gebracht.

      Dann muss ich in der VIS, immer wieder die Zahl eingeben, oder mehrmals aus dem Drop Down auswählen, damit es übernommen wird in der Ansicht. In den Objekten ändert es sich.

      6d674f32-0cde-4b6b-bdfb-0b47e2634244-image.png

      ScroungerS 1 Antwort Letzte Antwort
      0
      • D3ltoroxpD D3ltoroxp

        Guten Abend,
        ich bräuchte hier mal Hilfe.

        Ich bastel mir grad ne View, um meinen Mähroboter zu steuern. Hierfür wollte ich mal das Input Widget testen. So sieht die Config aus.

        dsafafd.PNG

        Und so der Eintrag unter Objekten.

        f9d8ca84-f0f2-4838-8bbe-f4077911ebe4-image.png

        Eigentlich bräuchte ich dort 20:00 oder 20:15 usw. Wenn ich in der VIS dann was eintrage, oder aus dem Drop Down Menu wähle, wird nur Stunden übertragen.

        9b26f411-96c0-41e1-bad2-78dc0a5acef2-image.png

        Muss ich da beim inputmask eintragen ? Hab dort schon hh:mm probiert, aber hat nichts gebracht.

        Dann muss ich in der VIS, immer wieder die Zahl eingeben, oder mehrmals aus dem Drop Down auswählen, damit es übernommen wird in der Ansicht. In den Objekten ändert es sich.

        6d674f32-0cde-4b6b-bdfb-0b47e2634244-image.png

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        schrieb am zuletzt editiert von Scrounger
        #90

        @D3ltoroxp
        Ist der Datenpunkt vom Typ String (Zeichenkette)?

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

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

        In dem roten Bereich sieht man ganz leicht eine schwarze Uhr. Diese hätte ich gerne in der Farbe weiß.

        Kann mir einer von euch sagen wo man die Farbe umstellen kann, ich habe lange gesucht aber es nicht gefunden :-(

        2020-06-23_07h35_10.png

        @Scrounger

        weißt du das vielleicht?

        .v-text-field__slot > input[type="time"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
        }
        

        hiermit kann man die farbe invertieren. Wie man die farbe ändern kann weiß ich auch nicht.

        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

        1 Antwort Letzte Antwort
        1
        • ScroungerS Scrounger

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

          @Scrounger
          danke das hat soweit geklappt. Allerdings funktioniert das nur auf meinem Win10 Rechner unter Chrome. Auf meinem Andoid-Tablet im Fully-Browser hat das leider keine Änderung gebracht. Hast du eine Idee warum das im Fully nicht klappt?

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

          müsste aber eigentlich gehen.

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

          2020-06-23_07h35_10.png

          @Scrounger

          weißt du das vielleicht?

          Ne leider nicht, wie hast du denn diese Uhr da rein bekommen?

          0 Offline
          0 Offline
          0018
          schrieb am zuletzt editiert von
          #91

          @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

          Mfg
          0018

          C 2 Antworten Letzte Antwort
          0
          • 0 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

            C Offline
            C Offline
            Chris_78
            schrieb am zuletzt editiert von
            #92

            @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:
            test2.png

            Mit Hintergrund:
            test.png

            1 Antwort Letzte Antwort
            0
            • 0 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

              C Offline
              C Offline
              Chris_78
              schrieb am zuletzt editiert von Chris_78
              #93

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

              ScroungerS 1 Antwort Letzte Antwort
              0
              • C Chris_78

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

                ScroungerS Offline
                ScroungerS Offline
                Scrounger
                Developer
                schrieb am zuletzt editiert von
                #94

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

                <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                C 1 Antwort Letzte Antwort
                0
                • ScroungerS 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.

                  C Offline
                  C Offline
                  Chris_78
                  schrieb am zuletzt editiert von
                  #95

                  @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...

                  ScroungerS 1 Antwort Letzte Antwort
                  0
                  • C 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...

                    ScroungerS Offline
                    ScroungerS Offline
                    Scrounger
                    Developer
                    schrieb am zuletzt editiert von
                    #96

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

                    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                    C 1 Antwort Letzte Antwort
                    0
                    • ScroungerS Scrounger

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

                      C Offline
                      C Offline
                      Chris_78
                      schrieb am zuletzt editiert von
                      #97

                      @Scrounger

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

                      test.png

                      oben: regular
                      unten: solo

                      Ganz zentriert habe ich allerdings noch nicht hinbekommen ;-)

                      1 Antwort Letzte Antwort
                      0
                      • ice987I Offline
                        ice987I Offline
                        ice987
                        schrieb am zuletzt editiert von ice987
                        #98

                        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?

                        husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                        ScroungerS 1 Antwort Letzte Antwort
                        0
                        • ice987I 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?

                          ScroungerS Offline
                          ScroungerS Offline
                          Scrounger
                          Developer
                          schrieb am zuletzt editiert von
                          #99

                          @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:

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

                          <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                          <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                          ice987I 1 Antwort Letzte Antwort
                          0
                          • ScroungerS 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:

                            '#.#','##.#','###.#','####.#'
                            
                            ice987I Offline
                            ice987I Offline
                            ice987
                            schrieb am zuletzt editiert von ice987
                            #100

                            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):

                            ccc3b488-3f09-4c55-9272-8b55a943a4eb-image.png

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

                            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!

                            husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                            ScroungerS 1 Antwort Letzte Antwort
                            0
                            • ice987I 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):

                              ccc3b488-3f09-4c55-9272-8b55a943a4eb-image.png

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

                              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!

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              schrieb am zuletzt editiert von
                              #101

                              @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 ;-)

                              <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                              <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                              1 Antwort Letzte Antwort
                              0
                              • BostilB Offline
                                BostilB Offline
                                Bostil
                                schrieb am zuletzt editiert von Bostil
                                #102

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

                                3444a60a-d39c-4751-81c7-60309e25d713-image.png


                                [{"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"}]

                                ScroungerS 1 Antwort Letzte Antwort
                                0
                                • BostilB Bostil

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

                                  3444a60a-d39c-4751-81c7-60309e25d713-image.png


                                  [{"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"}]

                                  ScroungerS Offline
                                  ScroungerS Offline
                                  Scrounger
                                  Developer
                                  schrieb am zuletzt editiert von Scrounger
                                  #103

                                  @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:

                                  3444a60a-d39c-4751-81c7-60309e25d713-image.png

                                  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.

                                  <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                  <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                  liv-in-skyL 1 Antwort Letzte Antwort
                                  1
                                  • ice987I Offline
                                    ice987I Offline
                                    ice987
                                    schrieb am zuletzt editiert von
                                    #104

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

                                    IMG_1927.jpg

                                    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:

                                    IMG_1925.PNG

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

                                    IMG_1926.PNG

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

                                    husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                                    1 Antwort Letzte Antwort
                                    0
                                    • Stephan SchleichS Stephan Schleich

                                      @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?
                                      6c9c7a13-53ed-4fed-9724-c4c9e3f33991-image.png

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

                                      liv-in-skyL Offline
                                      liv-in-skyL Offline
                                      liv-in-sky
                                      schrieb am zuletzt editiert von liv-in-sky
                                      #105

                                      @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?
                                      6c9c7a13-53ed-4fed-9724-c4c9e3f33991-image.png

                                      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

                                      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                      1 Antwort Letzte Antwort
                                      0
                                      • ScroungerS 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:

                                        3444a60a-d39c-4751-81c7-60309e25d713-image.png

                                        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.

                                        liv-in-skyL Offline
                                        liv-in-skyL Offline
                                        liv-in-sky
                                        schrieb am zuletzt editiert von
                                        #106

                                        @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
                                        Image 2.png

                                        das ganze so aus:

                                        Image 3.png

                                        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?

                                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                        ScroungerS 2 Antworten Letzte Antwort
                                        0
                                        • liv-in-skyL 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
                                          Image 2.png

                                          das ganze so aus:

                                          Image 3.png

                                          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?

                                          ScroungerS Offline
                                          ScroungerS Offline
                                          Scrounger
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #107

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

                                          <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                          <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                          liv-in-skyL 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          713

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe