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

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

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

    Hallo,

    ist es möglich das man beim Input - Time Widget die Zeitangabe zentriert im Button darstellen kann?

    alt:
    time.jpg

    neu:
    time_neu.jpg

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

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

    Hallo,

    ist es möglich das man beim Input - Time Widget die Zeitangabe zentriert im Button darstellen kann?

    alt:
    time.jpg

    neu:
    time_neu.jpg

    @Scrounger hast du evtl einen Tip für mich?

    Mfg
    0018

    ScroungerS 1 Reply Last reply
    0
    • 0 0018

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

      Hallo,

      ist es möglich das man beim Input - Time Widget die Zeitangabe zentriert im Button darstellen kann?

      alt:
      time.jpg

      neu:
      time_neu.jpg

      @Scrounger hast du evtl einen Tip für mich?

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

      @0018
      Unter CSS Test auf zentrieren stellen

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

      Was trage ich bei der Mask ein wenn ich nur Buchstaben große und klein haben möchte? Ich bekomm's nicht zusammen.....

      Hier ist dokumentiert, welche Mask zulässig sind:
      https://vuejs-tips.github.io/vue-the-mask/

      Muss ich mal noch mit in die Doku aufnehmen

      0 1 Reply Last reply
      1
      • ScroungerS Scrounger

        @0018
        Unter CSS Test auf zentrieren stellen

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

        Was trage ich bei der Mask ein wenn ich nur Buchstaben große und klein haben möchte? Ich bekomm's nicht zusammen.....

        Hier ist dokumentiert, welche Mask zulässig sind:
        https://vuejs-tips.github.io/vue-the-mask/

        Muss ich mal noch mit in die Doku aufnehmen

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

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

        @0018
        Unter CSS Test auf zentrieren stellen

        Wenn du im Reiter "CSS Font & Text" unter CSS "text-align = center" meinst, funktioniert es leider nicht.

        Hier mein Widget:

        [{"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":false,"g_css_shadow_padding":false,"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":"outlined-rounded","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":"#37474F","inputLayoutBackgroundColorHover":"","inputLayoutBorderColor":"#63a4ff","inputLayoutBorderColorHover":"#FFCA28","inputTextColor":"#ffffff","inputLabelText":"","inputMessage":"","inputLayoutBorderColorSelected":""},"style":{"left":"300px","top":"130px","width":"120px","height":"40px","z-index":"10","text-align":"center"},"widgetSet":"materialdesign"}]
        

        Mfg
        0018

        ScroungerS 1 Reply Last reply
        0
        • 0 0018

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

          @0018
          Unter CSS Test auf zentrieren stellen

          Wenn du im Reiter "CSS Font & Text" unter CSS "text-align = center" meinst, funktioniert es leider nicht.

          Hier mein Widget:

          [{"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":false,"g_css_shadow_padding":false,"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":"outlined-rounded","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":"#37474F","inputLayoutBackgroundColorHover":"","inputLayoutBorderColor":"#63a4ff","inputLayoutBorderColorHover":"#FFCA28","inputTextColor":"#ffffff","inputLabelText":"","inputMessage":"","inputLayoutBorderColorSelected":""},"style":{"left":"300px","top":"130px","width":"120px","height":"40px","z-index":"10","text-align":"center"},"widgetSet":"materialdesign"}]
          

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

          @0018 #
          Dann geht es nur mit css klasse überschreiben.
          Alternativ kannst auch nen Issue auf github erstellen, dann bau ich die funktion mal in den editor ein.

          0 3 Replies Last reply
          0
          • ScroungerS Scrounger

            @0018 #
            Dann geht es nur mit css klasse überschreiben.
            Alternativ kannst auch nen Issue auf github erstellen, dann bau ich die funktion mal in den editor ein.

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

            @Scrounger

            Danke! Da ich keinen Plan von CSS habe, könntest du mir vielleicht den Code dazu nennen?

            Mfg
            0018

            1 Reply Last reply
            0
            • ScroungerS Scrounger

              @0018 #
              Dann geht es nur mit css klasse überschreiben.
              Alternativ kannst auch nen Issue auf github erstellen, dann bau ich die funktion mal in den editor ein.

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

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

              Alternativ kannst auch nen Issue auf github erstellen, dann bau ich die funktion mal in den editor ein.

              Erledigt, GIT

              Kannst du mir als workaraound evtl den CSS Code zur Verfügung stellen, damit ich meine Vis schon mal fertig machen kann?

              Mfg
              0018

              1 Reply Last reply
              0
              • ScroungerS Scrounger

                @0018 #
                Dann geht es nur mit css klasse überschreiben.
                Alternativ kannst auch nen Issue auf github erstellen, dann bau ich die funktion mal in den editor ein.

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

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

                Dann geht es nur mit css klasse überschreiben.

                Kannst du mir vielleicht beschreiben wie ich den css-code überschreiben kann?

                Mfg
                0018

                1 Reply Last reply
                0
                • O Offline
                  O Offline
                  oxident
                  wrote on last edited by oxident
                  #74

                  Hi!
                  Kann man beim Select-Widget irgendwie den Knopf zum Löschen des Wertes ("X") ausblenden? Habe das Problem, dass sonst der DP immer auf einen leeren String gesetzt werden würde.

                  Sorry, erledigt. Unter "Symbole" gibt es die Option "Symbol zum Löschen des Textes anzeigen".

                  1 Reply Last reply
                  0
                  • C Offline
                    C Offline
                    Coffeelover
                    wrote on last edited by
                    #75

                    Hi,

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

                    VG

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

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

                      Mfg
                      0018

                      ScroungerS 1 Reply Last reply
                      0
                      • 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
                        wrote on last edited by
                        #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;
                        }
                        
                        0 1 Reply Last reply
                        0
                        • C Coffeelover

                          Hi,

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

                          VG

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          844

                                          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