Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

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

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.1k

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.4k

Material Design Widgets: Input, Select, Autocompl.

Scheduled Pinned Locked Moved Visualisierung
vis
147 Posts 38 Posters 23.7k Views 29 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ScroungerS Scrounger

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

    @Scrounger ist es möglich das du mir den css code nennst um die Uhrzeit im widget zu zentrieren?

    .v-select__selection.v-select__selection--comma{
        width: 100%;
        text-align: center;
    }
    
    0 Offline
    0 Offline
    0018
    wrote on last edited by
    #79

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

    .v-select__selection.v-select__selection--comma{
    width: 100%;
    text-align: center;
    }

    @Scrounger Danke dir!

    Kann es sein das du hier auf das select-widget den Code geschrieben hast? Es funktioniert leider nicht. Ich verwende das Input widget mit dem InputType = time, vielleicht liegt es daran?

    ich hab mal ein wenig rum probiert und z.B:

    .v-text-field__slot{
        text-align: center;
    }
    

    verwendet, aber keine Änderung. Wie müsste die richtige Zuweisung sein?

    Mfg
    0018

    0 1 Reply Last reply
    0
    • 0 Offline
      0 Offline
      0018
      wrote on last edited by
      #80

      @Scrounger ?

      Mfg
      0018

      1 Reply Last reply
      0
      • S Offline
        S Offline
        saeft_2003
        Most Active
        wrote on last edited by
        #81

        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

        S 1 Reply Last reply
        0
        • 0 0018

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

          .v-select__selection.v-select__selection--comma{
          width: 100%;
          text-align: center;
          }

          @Scrounger Danke dir!

          Kann es sein das du hier auf das select-widget den Code geschrieben hast? Es funktioniert leider nicht. Ich verwende das Input widget mit dem InputType = time, vielleicht liegt es daran?

          ich hab mal ein wenig rum probiert und z.B:

          .v-text-field__slot{
              text-align: center;
          }
          

          verwendet, aber keine Änderung. Wie müsste die richtige Zuweisung sein?

          0 Offline
          0 Offline
          0018
          wrote on last edited by
          #82

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

          Kann es sein das du hier auf das select-widget den Code geschrieben hast? Es funktioniert leider nicht. Ich verwende das Input widget mit dem InputType = time, vielleicht liegt es daran?

          @Scrounger könntest du dir den Code evtl nochmal ansehen?

          Mfg
          0018

          ScroungerS 1 Reply Last reply
          0
          • 0 0018

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

            Kann es sein das du hier auf das select-widget den Code geschrieben hast? Es funktioniert leider nicht. Ich verwende das Input widget mit dem InputType = time, vielleicht liegt es daran?

            @Scrounger könntest du dir den Code evtl nochmal ansehen?

            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            wrote on last edited by
            #83

            @0018

            .v-text-field__slot > input {
                text-align: center;
            }
            
            0 1 Reply Last reply
            0
            • ScroungerS Scrounger

              @0018

              .v-text-field__slot > input {
                  text-align: center;
              }
              
              0 Offline
              0 Offline
              0018
              wrote on last edited by
              #84

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

              Mfg
              0018

              ScroungerS 1 Reply Last reply
              0
              • S saeft_2003

                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

                S Offline
                S Offline
                saeft_2003
                Most Active
                wrote on last edited by
                #85

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

                1 Reply Last reply
                0
                • 0 0018

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

                  ScroungerS Offline
                  ScroungerS Offline
                  Scrounger
                  Developer
                  wrote on last edited by
                  #86

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

                  C S 0 3 Replies Last reply
                  0
                  • 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?

                    C Offline
                    C Offline
                    Conquest
                    wrote on last edited by Conquest
                    #87

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

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

                    Hab bei mir auch diese Uhr. Scheint mit einem Update von Chrome gekommen zu sein. Kann man das entfernen?
                    Gerade nachgesehen hängt definitiv an Chrome bei Firefox ist keine Uhr.

                    1 Reply Last reply
                    0
                    • 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
                      wrote on last edited by 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 Reply Last reply
                      0
                      • D3ltoroxpD Offline
                        D3ltoroxpD Offline
                        D3ltoroxp
                        wrote on last edited by 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 Reply Last reply
                        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
                          wrote on last edited by 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.

                          1 Reply Last reply
                          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
                            wrote on last edited by
                            #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 Replies Last reply
                            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
                              wrote on last edited by
                              #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 Reply Last reply
                              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
                                wrote on last edited by 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 Reply Last reply
                                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
                                  wrote on last edited by
                                  #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.

                                  C 1 Reply Last reply
                                  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
                                    wrote on last edited by
                                    #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 Reply Last reply
                                    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
                                      wrote on last edited by
                                      #96

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

                                      C 1 Reply Last reply
                                      0
                                      • ScroungerS Scrounger

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

                                        C Offline
                                        C Offline
                                        Chris_78
                                        wrote on last edited by
                                        #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 Reply Last reply
                                        0
                                        • ice987I Offline
                                          ice987I Offline
                                          ice987
                                          wrote on last edited by 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 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          534

                                          Online

                                          32.5k

                                          Users

                                          81.7k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe