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. [Projekt] MDCSS v2: Material Design CSS Version 2

NEWS

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

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

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uivismaterial css
717 Beiträge 74 Kommentatoren 177.6k Aufrufe 77 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.
  • P Offline
    P Offline
    Pittini
    Developer
    schrieb am zuletzt editiert von
    #419

    @Uhula Was aber viel schlimmer ist als das Problem mit dem aussehen des mdui-input-number widgets, ist, dasses keine Number übergibt sondern nen String. Grad beim rumtesten gemerkt als mein Skript abgekackt ist welches ne Nummer erwartet. Weitere Tests mit nem leeren Projekt und nur dem Widget ergaben dass es nicht am mdui zu liegen scheint, sondern das Widget grundsätzlich nen String übergibt, auch wenn die Checkbox "als String" nicht aktiviert ist. Kannst du das evtl. mal verfizieren?

    UhulaU 1 Antwort Letzte Antwort
    0
    • P Pittini

      @Uhula Was aber viel schlimmer ist als das Problem mit dem aussehen des mdui-input-number widgets, ist, dasses keine Number übergibt sondern nen String. Grad beim rumtesten gemerkt als mein Skript abgekackt ist welches ne Nummer erwartet. Weitere Tests mit nem leeren Projekt und nur dem Widget ergaben dass es nicht am mdui zu liegen scheint, sondern das Widget grundsätzlich nen String übergibt, auch wenn die Checkbox "als String" nicht aktiviert ist. Kannst du das evtl. mal verfizieren?

      UhulaU Offline
      UhulaU Offline
      Uhula
      schrieb am zuletzt editiert von
      #420

      @Pittini Ja, ist so, das Widget liefert immer einen String, auch wenn du Time/Color/usw wählst. Musst du dann scriptmäßig umwandeln. War aber, wie ich denke, schon immer so.
      Zu den Farben kann ich so nichts sagen, dazu müsste ich ins Projekt sehen können.

      @Dominik-F mdui-scale brauchst du nicht wirklich. Das kannst du auch im Widget direkt einstellen: CSS Allgemein | transform dort scale(x,y) eingeben. Achtung, der vis-Editor kommt damit teilweise durcheinander, zur Laufzeit geht es aber.

      Uhula - Leise und Weise
      Ex: ioBroker on Gigabyte NUC Proxmox

      Dominik F.D P 2 Antworten Letzte Antwort
      0
      • UhulaU Uhula

        @Pittini Ja, ist so, das Widget liefert immer einen String, auch wenn du Time/Color/usw wählst. Musst du dann scriptmäßig umwandeln. War aber, wie ich denke, schon immer so.
        Zu den Farben kann ich so nichts sagen, dazu müsste ich ins Projekt sehen können.

        @Dominik-F mdui-scale brauchst du nicht wirklich. Das kannst du auch im Widget direkt einstellen: CSS Allgemein | transform dort scale(x,y) eingeben. Achtung, der vis-Editor kommt damit teilweise durcheinander, zur Laufzeit geht es aber.

        Dominik F.D Offline
        Dominik F.D Offline
        Dominik F.
        schrieb am zuletzt editiert von
        #421

        @Uhula

        Ich habs mal ausprobiert. Das Widget wird dann anders positioniert als mit mdui-scale, aus welchem Grund auch immer. Dazu kommt, dass wie du schon schriebst, der vis Editor die Veränderung nicht anzeigt was die richtige Postionierung des Widgets schwieriger macht wie ich finde. mdui-scale funktioniert wunderbar. Wenn du es nicht aufnehmen möchtest ist es nicht schlimm, werds dann einfach weiter selbst hinzufügen

        1 Antwort Letzte Antwort
        0
        • UhulaU Uhula

          @Pittini Ja, ist so, das Widget liefert immer einen String, auch wenn du Time/Color/usw wählst. Musst du dann scriptmäßig umwandeln. War aber, wie ich denke, schon immer so.
          Zu den Farben kann ich so nichts sagen, dazu müsste ich ins Projekt sehen können.

          @Dominik-F mdui-scale brauchst du nicht wirklich. Das kannst du auch im Widget direkt einstellen: CSS Allgemein | transform dort scale(x,y) eingeben. Achtung, der vis-Editor kommt damit teilweise durcheinander, zur Laufzeit geht es aber.

          P Offline
          P Offline
          Pittini
          Developer
          schrieb am zuletzt editiert von Pittini
          #422

          @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

          a, ist so, das Widget liefert immer einen String, auch wenn du Time/Color/usw wählst. Musst du dann scriptmäßig umwandeln. War aber, wie ich denke, schon immer so.

          Verwende das selten, finde das Verhalten aber "dämlich". Vorallem wenn man die Option "als String" bedenkt, die dann ja sinnfrei wäre. Hab mal ein Issue aufgemacht.

          Hab Dir im Chat den Link zum Projekt geschickt, wär nett wenn Du Dir das mal anschauen könntest. Tritt offenbar nur in dem Riesenprojekt auf, beim kleinen HeatingControl Projekt, indem genau die gleichen cards und widgets wie auf der Heizungsseite im großen Projekt sind, schauts einwandfrei aus. Kann das wieder, w ie wir schon mal hatten, ein Timingproblem sein?

          1 Antwort Letzte Antwort
          0
          • T Offline
            T Offline
            Tirador
            schrieb am zuletzt editiert von
            #423

            @Uhula Bei der vorherigen Version wurden mir noch graue Trennstriche zwischen den Listitems dargestellt. Das ist nun weg.
            Muss man dafür noch etwas zusätzlich definieren?

            Beispiel einer aktuellen Ansicht:
            2020-05-01 09_27_57-vis.png

            UhulaU 1 Antwort Letzte Antwort
            0
            • T Tirador

              @Uhula Bei der vorherigen Version wurden mir noch graue Trennstriche zwischen den Listitems dargestellt. Das ist nun weg.
              Muss man dafür noch etwas zusätzlich definieren?

              Beispiel einer aktuellen Ansicht:
              2020-05-01 09_27_57-vis.png

              UhulaU Offline
              UhulaU Offline
              Uhula
              schrieb am zuletzt editiert von
              #424

              @Tirador sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

              Muss man dafür noch etwas zusätzlich definieren?

              Ja, steht im Changelog:

              • mdui-list: hat per Vorgabe keinen Border und keine Item-Trennlinien mehr, wenn gewünscht, "mdui-list mdui-bordered" bzw. "mdui-list mdui-divided" angeben

              Uhula - Leise und Weise
              Ex: ioBroker on Gigabyte NUC Proxmox

              1 Antwort Letzte Antwort
              0
              • P Offline
                P Offline
                Pittini
                Developer
                schrieb am zuletzt editiert von
                #425

                @Uhula
                Ich konnte das Problem lösen, der Grund bleibt unklar. Ich habe alle Widgets von der Seite contHeizung in eine leere Seite kopiert, dann die contHeizung gelöscht und die neue wieder contHeizung genannt. Und zack...sieht alles aus wie es soll. Its magic ;)

                UhulaU 1 Antwort Letzte Antwort
                0
                • D Offline
                  D Offline
                  der-eine
                  schrieb am zuletzt editiert von der-eine
                  #426

                  @Uhula habe gerade versucht die Material Design Icons in der lnav zu verwenden funktioniert leider nicht so wie mit den Material Icons. Gibts da eine Möglichkeit?

                  Bildschirmfoto 2020-05-01 um 12.55.15.png

                  Bildschirmfoto 2020-05-02 um 13.36.11.png

                  UhulaU 1 Antwort Letzte Antwort
                  0
                  • D der-eine

                    @Uhula habe gerade versucht die Material Design Icons in der lnav zu verwenden funktioniert leider nicht so wie mit den Material Icons. Gibts da eine Möglichkeit?

                    Bildschirmfoto 2020-05-01 um 12.55.15.png

                    Bildschirmfoto 2020-05-02 um 13.36.11.png

                    UhulaU Offline
                    UhulaU Offline
                    Uhula
                    schrieb am zuletzt editiert von
                    #427

                    @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                    @Uhula habe gerade versucht die Material Design Icons in der lnav zu verwenden funktioniert leider nicht so wie mit den Material Icons. Gibts da eine Möglichkeit?

                    Bildschirmfoto 2020-05-01 um 12.55.15.png

                    Bildschirmfoto 2020-05-02 um 13.36.11.png

                    Du meinst den Unterstrich? Der führt nur bei den Material Icons zum Abstand, da er im Font so codiert ist. Mit Material Design Icons musst du die Leerzeichen nach dem <i ...>...</i> mit "none blanc spaces" einfügen, auch mehrere nacheinander:

                    &nbsp;
                    

                    Alternativ im <i ...>...</i> einen rechten Rand via style-Attribut mit angeben:

                    <i ... style='margin-right:1em;'>...</i>
                    

                    Uhula - Leise und Weise
                    Ex: ioBroker on Gigabyte NUC Proxmox

                    D 1 Antwort Letzte Antwort
                    0
                    • P Pittini

                      @Uhula
                      Ich konnte das Problem lösen, der Grund bleibt unklar. Ich habe alle Widgets von der Seite contHeizung in eine leere Seite kopiert, dann die contHeizung gelöscht und die neue wieder contHeizung genannt. Und zack...sieht alles aus wie es soll. Its magic ;)

                      UhulaU Offline
                      UhulaU Offline
                      Uhula
                      schrieb am zuletzt editiert von
                      #428

                      @Pittini sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                      @Uhula
                      Ich konnte das Problem lösen, der Grund bleibt unklar. Ich habe alle Widgets von der Seite contHeizung in eine leere Seite kopiert, dann die contHeizung gelöscht und die neue wieder contHeizung genannt. Und zack...sieht alles aus wie es soll. Its magic ;)

                      Vielleicht hatte die view selbst noch einen background gesetzt. K.A., aber danke.

                      Uhula - Leise und Weise
                      Ex: ioBroker on Gigabyte NUC Proxmox

                      1 Antwort Letzte Antwort
                      0
                      • UhulaU Uhula

                        @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                        @Uhula habe gerade versucht die Material Design Icons in der lnav zu verwenden funktioniert leider nicht so wie mit den Material Icons. Gibts da eine Möglichkeit?

                        Bildschirmfoto 2020-05-01 um 12.55.15.png

                        Bildschirmfoto 2020-05-02 um 13.36.11.png

                        Du meinst den Unterstrich? Der führt nur bei den Material Icons zum Abstand, da er im Font so codiert ist. Mit Material Design Icons musst du die Leerzeichen nach dem <i ...>...</i> mit "none blanc spaces" einfügen, auch mehrere nacheinander:

                        &nbsp;
                        

                        Alternativ im <i ...>...</i> einen rechten Rand via style-Attribut mit angeben:

                        <i ... style='margin-right:1em;'>...</i>
                        
                        D Offline
                        D Offline
                        der-eine
                        schrieb am zuletzt editiert von
                        #429

                        @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                        style='margin-right:1em;

                        Super so <i style='margin-right:1em' class="mdui-mdi">󰛉</i>Proxmox funktioniert es Danke! Die erste Variante hab ich nicht verstanden. :thinking_face:

                        UhulaU 1 Antwort Letzte Antwort
                        0
                        • D der-eine

                          @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                          style='margin-right:1em;

                          Super so <i style='margin-right:1em' class="mdui-mdi">󰛉</i>Proxmox funktioniert es Danke! Die erste Variante hab ich nicht verstanden. :thinking_face:

                          UhulaU Offline
                          UhulaU Offline
                          Uhula
                          schrieb am zuletzt editiert von
                          #430

                          @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                          Die erste Variante hab ich nicht verstanden

                          Dann nur zur Vollständigkeit, sieht so aus:

                          <i ...>...</i>&nbsp;&nbsp;Mein Text
                          

                          Uhula - Leise und Weise
                          Ex: ioBroker on Gigabyte NUC Proxmox

                          D 1 Antwort Letzte Antwort
                          0
                          • UhulaU Uhula

                            @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                            Die erste Variante hab ich nicht verstanden

                            Dann nur zur Vollständigkeit, sieht so aus:

                            <i ...>...</i>&nbsp;&nbsp;Mein Text
                            
                            D Offline
                            D Offline
                            der-eine
                            schrieb am zuletzt editiert von
                            #431

                            @Uhula ah jetzt verstanden danke. :+1:

                            1 Antwort Letzte Antwort
                            0
                            • D Offline
                              D Offline
                              der-eine
                              schrieb am zuletzt editiert von der-eine
                              #432

                              @Uhula jetzt bin ich es nochmal... :grimacing: in Deinem Demo auf View cardDemoExHeos ist unten eine Select Value List

                              Bildschirmfoto 2020-05-03 um 00.01.58.png

                              Wie bekomme ich dort die Schrift zentriert? Hätte es mit:

                              .mdui-select.mdui-select-center input[type="text"] {
                              
                              text-align:center !important;
                              
                              }
                              

                              versucht aber ändert sich nichts. Hast Du einen Tipp?

                              UhulaU 1 Antwort Letzte Antwort
                              0
                              • D der-eine

                                @Uhula jetzt bin ich es nochmal... :grimacing: in Deinem Demo auf View cardDemoExHeos ist unten eine Select Value List

                                Bildschirmfoto 2020-05-03 um 00.01.58.png

                                Wie bekomme ich dort die Schrift zentriert? Hätte es mit:

                                .mdui-select.mdui-select-center input[type="text"] {
                                
                                text-align:center !important;
                                
                                }
                                

                                versucht aber ändert sich nichts. Hast Du einen Tipp?

                                UhulaU Offline
                                UhulaU Offline
                                Uhula
                                schrieb am zuletzt editiert von
                                #433

                                @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                Hast Du einen Tipp?

                                text-align wird im select ignoriert. Versuch mal text-align-last statt text-align - damit ist eigentlich nur die jeweils letzte Zeile betroffen, da im select aber nur eine drin ist, betrifft es sie auch. Kann funktionieren, muss aber nicht.

                                Uhula - Leise und Weise
                                Ex: ioBroker on Gigabyte NUC Proxmox

                                D 1 Antwort Letzte Antwort
                                0
                                • UhulaU Uhula

                                  @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                  Hast Du einen Tipp?

                                  text-align wird im select ignoriert. Versuch mal text-align-last statt text-align - damit ist eigentlich nur die jeweils letzte Zeile betroffen, da im select aber nur eine drin ist, betrifft es sie auch. Kann funktionieren, muss aber nicht.

                                  D Offline
                                  D Offline
                                  der-eine
                                  schrieb am zuletzt editiert von
                                  #434

                                  @Uhula danke aber funktioniert leider auch nicht.

                                  UhulaU 1 Antwort Letzte Antwort
                                  0
                                  • D der-eine

                                    @Uhula danke aber funktioniert leider auch nicht.

                                    UhulaU Offline
                                    UhulaU Offline
                                    Uhula
                                    schrieb am zuletzt editiert von
                                    #435

                                    @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                    @Uhula danke aber funktioniert leider auch nicht.

                                    Kann mit deinem CSS auch nicht, da du ein input-HTML-Element manipulieren möchtest, es sich aber um ein select-HTML-Element handelt. Versuch mal:

                                    .mdui-select.mdui-center-h select,
                                    .mdui-select.mdui-center select  {
                                        text-align-last: center !important;
                                    }
                                    

                                    und weise dem Widget mdui-center oder mdui-center-h zu (habe ich im MDCSS so aufgenommen).

                                    Uhula - Leise und Weise
                                    Ex: ioBroker on Gigabyte NUC Proxmox

                                    D 1 Antwort Letzte Antwort
                                    0
                                    • T Offline
                                      T Offline
                                      Tirador
                                      schrieb am zuletzt editiert von
                                      #436

                                      Gibt es eigentlich die Möglichkeit einen Back-Button einzubauen im anav ? D.h. wenn ich zurück möchte zur vorherigen View/Page.

                                      D UhulaU 2 Antworten Letzte Antwort
                                      0
                                      • T Tirador

                                        Gibt es eigentlich die Möglichkeit einen Back-Button einzubauen im anav ? D.h. wenn ich zurück möchte zur vorherigen View/Page.

                                        D Offline
                                        D Offline
                                        der-eine
                                        schrieb am zuletzt editiert von der-eine
                                        #437

                                        @Tirador importiere mal dieses Widget. Mit javascript:history.back(1) in "Link" kommst Du eine View zurück.

                                        Widget

                                        [{"tpl":"tplIconLink","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"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","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,"src":"","href":"javascript:history.back(1)","class":"mdui-button mdui-center","alt":"","text":"<i class=\"material-icons\">keyboard_backspace</i>"},"style":{"left":"calc(100% - 80px)","top":"2px","width":"36px","height":"36px"},"widgetSet":"jqui"}]
                                        

                                        T 1 Antwort Letzte Antwort
                                        0
                                        • UhulaU Uhula

                                          @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                          @Uhula danke aber funktioniert leider auch nicht.

                                          Kann mit deinem CSS auch nicht, da du ein input-HTML-Element manipulieren möchtest, es sich aber um ein select-HTML-Element handelt. Versuch mal:

                                          .mdui-select.mdui-center-h select,
                                          .mdui-select.mdui-center select  {
                                              text-align-last: center !important;
                                          }
                                          

                                          und weise dem Widget mdui-center oder mdui-center-h zu (habe ich im MDCSS so aufgenommen).

                                          D Offline
                                          D Offline
                                          der-eine
                                          schrieb am zuletzt editiert von der-eine
                                          #438

                                          @Uhula war wohl schon zu spät... Danke aber mit Deinem Code geht es auch nicht. Dann geht das wohl nicht bei dem Widget.
                                          Wie bekomme ich das Herz am Anfang weg? Das würde schon reichen.

                                          UhulaU 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

                                          781

                                          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