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

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

    @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
    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antworten Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #71

          @Scrounger

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

          Mfg
          0018

          1 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              0
              • O Offline
                O Offline
                oxident
                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                0
                • C Offline
                  C Offline
                  Coffeelover
                  schrieb am zuletzt editiert von
                  #75

                  Hi,

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

                  VG

                  C 1 Antwort Letzte Antwort
                  0
                  • 0 Offline
                    0 Offline
                    0018
                    schrieb am zuletzt editiert von
                    #76

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

                    Mfg
                    0018

                    ScroungerS 1 Antwort Letzte Antwort
                    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
                      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 Offline
                              S Offline
                              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 Offline
                                      S Offline
                                      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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          681

                                          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