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

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

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

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

Material Design Widgets: Input, Select, Autocompl.

Scheduled Pinned Locked Moved Visualisierung
vis
147 Posts 38 Posters 23.0k 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.
  • P Pittini

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

    z.b beim Script von @Pittini für den Heatingcontroll Adapter werden Werte angelegt welche mit Semikolon getrennt werden oder bei meinem Sonos Script für die Favoritenliste gibt mit Sicherheit noch mehr.

    Das sind Vorgabewerte für Vis ValueLists, die müssen halt mit Semikolon getrennt werden. Denk dass es das recht häufig geben dürfte.

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

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

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

    z.b beim Script von @Pittini für den Heatingcontroll Adapter werden Werte angelegt welche mit Semikolon getrennt werden oder bei meinem Sonos Script für die Favoritenliste gibt mit Sicherheit noch mehr.

    Das sind Vorgabewerte für Vis ValueLists, die müssen halt mit Semikolon getrennt werden. Denk dass es das recht häufig geben dürfte.

    Ja ich weiß sollte auch keine Kritik an dir sein.
    Deswegen hätte ich es ja gerne in den Material Design Widgets gefixt das ich dein Script nutzen kann.

    1 Reply Last reply
    0
    • ScroungerS Scrounger

      @Conquest
      Nein das hat keinen bestimmten Grund.
      Welche Objekte sind denn z.B. nicht kompatibel?

      Schreib bitte nen issue dazu auf git, dann bau ich es ein.

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

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

      @Conquest
      Nein das hat keinen bestimmten Grund.
      Welche Objekte sind denn z.B. nicht kompatibel?

      Schreib bitte nen issue dazu auf git, dann bau ich es ein.

      Issue hab ich angelegt:

      https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/76

      Danke schon mal.

      1 Reply Last reply
      0
      • P Pittini

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

        z.b beim Script von @Pittini für den Heatingcontroll Adapter werden Werte angelegt welche mit Semikolon getrennt werden oder bei meinem Sonos Script für die Favoritenliste gibt mit Sicherheit noch mehr.

        Das sind Vorgabewerte für Vis ValueLists, die müssen halt mit Semikolon getrennt werden. Denk dass es das recht häufig geben dürfte.

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

        @Conquest:

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

        Das sind Vorgabewerte für Vis ValueLists, die müssen halt mit Semikolon getrennt werden. Denk dass es das recht häufig geben dürfte.

        Ok, da das Standard ist werde ich das von , auf ; umstellen.

        <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 Reply Last reply
        0
        • ScroungerS Scrounger

          @Conquest:

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

          Das sind Vorgabewerte für Vis ValueLists, die müssen halt mit Semikolon getrennt werden. Denk dass es das recht häufig geben dürfte.

          Ok, da das Standard ist werde ich das von , auf ; umstellen.

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

          @Scrounger
          Super danke dir:+1:

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

            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

            Mfg
            0018

            0 1 Reply Last reply
            0
            • ScroungerS Scrounger

              @Termina
              Ah sorry falsch gelesen, du meinst das Input Widget und nicht das select.

              Die Mask ist falsch, wenn du hier eine 4 stellige Zahl eingeben willst, musst du bei Mask #### eingeben

              etvE Offline
              etvE Offline
              etv
              wrote on last edited by
              #66

              @Scrounger

              noch mal zum Input Widget und mask....

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

              Wenn ich nur große eingebe, kann ich nur große tippen, bei Kleinen nur kleine....ich möchte aber beide zulassen...

              Liebe Grüße
              Tom

              …ist schon sehr lange begeisterter ioBroker Nutzer! 1x zu Hause und 1x auf der Alm. ioBroker ist das 'Hirn' des Smarthome und steuert HomeMatic und Shellys, loggt was so passiert, zeigt es auf Tabletts schön an und ermöglicht mir via Cloud Adapter den Fernzugriff...

              1 Reply Last reply
              0
              • 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

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

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

                                    <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 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
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          605

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          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