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

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.1k

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Scheduled Pinned Locked Moved Visualisierung
material uivismaterial css
717 Posts 74 Posters 182.9k Views 77 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

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

    Übernimm das mal (also die Zeilen im CSS ersetzen) und sage mir, ob es damit besser ist.

    Leider keine Verbesserung. Ich hab das Feld jetzt mal zum testen höher gemacht, jetzt sieht man eher was da passiert. Er macht den Zahlenbereich derart breit, dass logischerweise ein Umbruch kommen muß. Nur steht die size eh schon nur auf 1. Und die Darstellung an sich stimmt ja iwie auch nicht, aber dass is vermutlich ein anderes Problem.

    b2020-04-30 19_33_37-vis.png

    UhulaU Offline
    UhulaU Offline
    Uhula
    wrote on last edited by
    #416

    @Pittini Schon mal versucht keine "width" u/o "height" anzugeben?
    Als Workaround: Das Label als eigenes Widget realisieren und im Input leer lassen. Ich habe beim Rumspielen auch festgestellt, dass manchmal Umbrüche erfolgen, wo ich keine erwartet habe. Mehrere HTML Elemente in einem <div> haben manchmal ein Eigenleben.

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

    P Dominik F.D 2 Replies Last reply
    0
    • UhulaU Uhula

      @Pittini Schon mal versucht keine "width" u/o "height" anzugeben?
      Als Workaround: Das Label als eigenes Widget realisieren und im Input leer lassen. Ich habe beim Rumspielen auch festgestellt, dass manchmal Umbrüche erfolgen, wo ich keine erwartet habe. Mehrere HTML Elemente in einem <div> haben manchmal ein Eigenleben.

      P Offline
      P Offline
      Pittini
      Developer
      wrote on last edited by Pittini
      #417

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

      Schon mal versucht keine "width" u/o "height" anzugeben?

      Nö, grad mal gemacht, auch doof, zwar kein Umbruch mehr aber viel zu lang:
      2020-04-30 20_35_08-Microsoft Store.png

      So isses dann mit separatem LAbel Widget, letztendlich siehts dann so aus wie mit mdui-input (ohne number).
      2020-04-30 20_38_46-Microsoft Store.png

      Das waäre ja von der Breite akzeptabel aber warum stimmt der Hintergrund nicht, siehe auch Ursprungspost mit den datetime widgets? Hier noch mal zum Vergleich Version 2.0:

      2020-04-30 21_02_18-Microsoft Store.png

      Version 2.5:
      1588248154544-2020-04-30-13_59_43-vis.png

      1 Reply Last reply
      0
      • UhulaU Uhula

        @Pittini Schon mal versucht keine "width" u/o "height" anzugeben?
        Als Workaround: Das Label als eigenes Widget realisieren und im Input leer lassen. Ich habe beim Rumspielen auch festgestellt, dass manchmal Umbrüche erfolgen, wo ich keine erwartet habe. Mehrere HTML Elemente in einem <div> haben manchmal ein Eigenleben.

        Dominik F.D Offline
        Dominik F.D Offline
        Dominik F.
        wrote on last edited by
        #418

        @Uhula

        du hast ja mdui-scale integriert, jedoch nur von 0.1 bis 0.9. könntest du eventuell auch von 1.1 bis 1.9 integrieren?
        Hab mir das bisher immer selber hinzugefügt, wäre aber toll wenn du das mit aufnehmen könntest.

        1 Reply Last reply
        0
        • P Offline
          P Offline
          Pittini
          Developer
          wrote on last edited by
          #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 Reply Last reply
          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
            wrote on last edited by
            #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 Replies Last reply
            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.
              wrote on last edited by
              #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 Reply Last reply
              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
                wrote on last edited by 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 Reply Last reply
                0
                • T Offline
                  T Offline
                  Tirador
                  wrote on last edited by
                  #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 Reply Last reply
                  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
                    wrote on last edited by
                    #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 Reply Last reply
                    0
                    • P Offline
                      P Offline
                      Pittini
                      Developer
                      wrote on last edited by
                      #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 Reply Last reply
                      0
                      • D Offline
                        D Offline
                        der-eine
                        wrote on last edited by 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 Reply Last reply
                        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
                          wrote on last edited by
                          #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 Reply Last reply
                          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
                            wrote on last edited by
                            #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 Reply Last reply
                            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
                              wrote on last edited by
                              #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 Reply Last reply
                              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
                                wrote on last edited by
                                #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 Reply Last reply
                                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
                                  wrote on last edited by
                                  #431

                                  @Uhula ah jetzt verstanden danke. :+1:

                                  1 Reply Last reply
                                  0
                                  • D Offline
                                    D Offline
                                    der-eine
                                    wrote on last edited by 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 Reply Last reply
                                    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
                                      wrote on last edited by
                                      #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 Reply Last reply
                                      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
                                        wrote on last edited by
                                        #434

                                        @Uhula danke aber funktioniert leider auch nicht.

                                        UhulaU 1 Reply Last reply
                                        0
                                        • D der-eine

                                          @Uhula danke aber funktioniert leider auch nicht.

                                          UhulaU Offline
                                          UhulaU Offline
                                          Uhula
                                          wrote on last edited by
                                          #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 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

                                          494

                                          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