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.5k

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.
  • 0 0018

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

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

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

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

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

    0 1 Antwort Letzte Antwort
    0
    • C Coffeelover

      Hi,

      wie muss ich das Select Widget für Datumswerte konfigurieren?

      VG

      C Offline
      C Offline
      Coffeelover
      schrieb am zuletzt editiert von
      #78

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

      wie muss ich das Select Widget für Datumswerte konfigurieren?

      Ich antworte mal selbst: Im Prinzip ist die Einstellung total banal. Während ich in Android (Fully) dann auch den Datumsdialog bekomme, muss ich am WIN-Rechner die Infos selbst eintippen.

      1 Antwort Letzte Antwort
      0
      • 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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        0
        • 0 Offline
          0 Offline
          0018
          schrieb am zuletzt editiert von
          #80

          @Scrounger ?

          Mfg
          0018

          1 Antwort Letzte Antwort
          0
          • S Online
            S Online
            saeft_2003
            Most Active
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #83

                @0018

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

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

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

                0 1 Antwort Letzte Antwort
                0
                • ScroungerS Scrounger

                  @0018

                  .v-text-field__slot > input {
                      text-align: center;
                  }
                  
                  0 Offline
                  0 Offline
                  0018
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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 Online
                    S Online
                    saeft_2003
                    Most Active
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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?

                      <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 S 0 3 Antworten Letzte Antwort
                      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
                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                        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 Online
                          S Online
                          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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          337

                                          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