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

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

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uivismaterial css
717 Beiträge 74 Kommentatoren 177.9k 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.
  • BostilB Bostil

    Gerne würde ich ein Widget (von Scrounger) von rechts nach links "sanft" einblendend animieren lassen. War mit meiner Suche (auch hier) bisher erfolglos, hat jemand dennoch eine Idee, ob dies mit CSS klappt? Danke! :-)

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

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

    hat jemand dennoch eine Idee, ob dies mit CSS klappt?

    Grundsätzlich kann man CSS-Properties einer CSS-Klasse animieren, auch left/right/width/height Werte. Was dann wohl dem entspricht, was du erreichen möchtest. Da ich aber die CSS-Klassen der MD-Widgets nicht kenne, kann ich dir leider nicht konkreter antworten. Wenn du dich diesbezüglich in die CSS-Materie einlesen möchtest, such mal nach css animation und css keyframes.

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

    1 Antwort Letzte Antwort
    0
    • UhulaU Uhula

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

      kann mir jemand helfen wie ich beim mdui-input einen transparenten Hintergrund hinbekommen

      Der ist eigentlich immer vorhanden - es sei denn, du hast einmal dem View selbst ein Thema zugeordnet, dann ist diese Einstellung stärker - und ich weiß auch nicht, wie du das rückgängig machen kannst ohne einen neuen View anzulegen und deine Widgets dort alle hinein zu kopieren.

      de75153a-fcd4-4f6b-990a-eb512948ca14-image.png

      Alternativ kannst du in der CSS Datei dir die Definition für mdui-input suchen und bei der background Angabe noch ein !important dahinter setzen. Ich würde aber eine saubere View nehmen, da die View Thema-Wahl evtl. noch andere Auswirkungen haben kann.

      .mdui-input input:not([type="button"]) {
      ...
        background: rgba(0,0,0,.03) !important;
      ...
      }
      
      S Offline
      S Offline
      Saschag
      schrieb am zuletzt editiert von Saschag
      #508

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

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

      kann mir jemand helfen wie ich beim mdui-input einen transparenten Hintergrund hinbekommen

      Der ist eigentlich immer vorhanden - es sei denn, du hast einmal dem View selbst ein Thema zugeordnet, dann ist diese Einstellung stärker - und ich weiß auch nicht, wie du das rückgängig machen kannst ohne einen neuen View anzulegen und deine Widgets dort alle hinein zu kopieren.

      de75153a-fcd4-4f6b-990a-eb512948ca14-image.png

      Alternativ kannst du in der CSS Datei dir die Definition für mdui-input suchen und bei der background Angabe noch ein !important dahinter setzen. Ich würde aber eine saubere View nehmen, da die View Thema-Wahl evtl. noch andere Auswirkungen haben kann.

      .mdui-input input:not([type="button"]) {
      ...
        background: rgba(0,0,0,.03) !important;
      ...
      }
      

      @Uhula
      Bin endlich dazu gekommen 😏
      Dank dir! Ein neuer View hat geholfen 👍

      1 Antwort Letzte Antwort
      0
      • Dominik F.D Dominik F.

        @darkiop

        ja, mit mdui-expand mdui-onload

        D Offline
        D Offline
        darkiop
        Most Active
        schrieb am zuletzt editiert von darkiop
        #509

        @Dominik-F sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

        @darkiop

        ja, mit mdui-expand mdui-onload

        @Uhula Aktuell werden nur die cards zusammengeklappt welche auf der View liegen die beim Laden aktiv war. Besteht die Möglichkeit, grundsätzlich alle Cards zusammenzuklappen?

        Ergänzung: Bei mir funktioniert das nicht wie von dir gedacht, da ich die Seiten in einem View8 Widget lade, d.h. onload() wird da nur einmal beim erstmaligen laden der Seite aufgerufen.

        Hat trotzdem jemand eine Idee wie ich den Cards mitgeben könnte?

        Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

        UhulaU 1 Antwort Letzte Antwort
        0
        • D darkiop

          @Dominik-F sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

          @darkiop

          ja, mit mdui-expand mdui-onload

          @Uhula Aktuell werden nur die cards zusammengeklappt welche auf der View liegen die beim Laden aktiv war. Besteht die Möglichkeit, grundsätzlich alle Cards zusammenzuklappen?

          Ergänzung: Bei mir funktioniert das nicht wie von dir gedacht, da ich die Seiten in einem View8 Widget lade, d.h. onload() wird da nur einmal beim erstmaligen laden der Seite aufgerufen.

          Hat trotzdem jemand eine Idee wie ich den Cards mitgeben könnte?

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

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

          Hat trotzdem jemand eine Idee wie ich den Cards mitgeben könnte?

          Warte mal auf die Version 2.5.1, da überwache ich den view-Wechsel der View8 Widgets und führe die mdui-onload dann für die nachgeladenen Cards durch. Vielleicht geht es dann auch bei dir.

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

          D 1 Antwort Letzte Antwort
          1
          • UhulaU Uhula

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

            Hat trotzdem jemand eine Idee wie ich den Cards mitgeben könnte?

            Warte mal auf die Version 2.5.1, da überwache ich den view-Wechsel der View8 Widgets und führe die mdui-onload dann für die nachgeladenen Cards durch. Vielleicht geht es dann auch bei dir.

            D Offline
            D Offline
            darkiop
            Most Active
            schrieb am zuletzt editiert von
            #511

            @Uhula Perfekt, vielen Dank @Uhula! Ist aktuell nur Kosmetik, aber bei der Verwendung aufm Smartphone durchaus nützlich!

            Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

            1 Antwort Letzte Antwort
            0
            • kmxakK Offline
              kmxakK Offline
              kmxak
              Most Active
              schrieb am zuletzt editiert von
              #512

              Moin, bei mir funzt die Lbar nicht wie sie soll. Ist nicht anklickbar. Habe alle anderen Adapter mit Material deinstalliert auch mehrfach neu gestartet und cache gelöscht und alle browser probiert aber nix zu machen. hat noch einer eine idee?

              Gruß Alex

              UhulaU 1 Antwort Letzte Antwort
              0
              • kmxakK kmxak

                Moin, bei mir funzt die Lbar nicht wie sie soll. Ist nicht anklickbar. Habe alle anderen Adapter mit Material deinstalliert auch mehrfach neu gestartet und cache gelöscht und alle browser probiert aber nix zu machen. hat noch einer eine idee?

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

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

                hat noch einer eine idee?

                Was bedeutet "lbar funzt nicht"? Du meinst sicher die lnav-View?
                In welchem Projekt? MD-Demo?
                Wird sie nicht dargestellt? Öffnet sie sich nicht beim Klick auf das Burger-Menü?
                Wenn es nicht das MD_Demo Projekt ist, hast du den Script-Teil in dein Projekt übernommen?

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

                1 Antwort Letzte Antwort
                0
                • kmxakK Offline
                  kmxakK Offline
                  kmxak
                  Most Active
                  schrieb am zuletzt editiert von kmxak
                  #514

                  MD_Demo von GitHub habe CSS und JS im Projekt eingefügt und auch die CSS geändert wegen anderem Namen.
                  Die Lnav öffnet sich ist aber nicht anklickbar auch die Untermenüs lassen sich nicht aufklappen stattdessen schließt sich die Lnav einfach wieder.

                  So ich habe eine Lösung.
                  Ich hatte vor einiger Zeit mal die anderen Material Adapter getestet diese aber wieder deinstalliert und gelöscht aber scheinbar hat der ioBroker diese eben nicht gelöscht. Nachdem ich in ioBroker Ordnern zumgestöbert habe sind mit einige Ordner von den Adaptern aufgefallen und habe diese manuell gelöscht. Danach ein restart und nun geht es alles so wie es soll.

                  Gruß Alex

                  UhulaU 1 Antwort Letzte Antwort
                  0
                  • kmxakK kmxak

                    MD_Demo von GitHub habe CSS und JS im Projekt eingefügt und auch die CSS geändert wegen anderem Namen.
                    Die Lnav öffnet sich ist aber nicht anklickbar auch die Untermenüs lassen sich nicht aufklappen stattdessen schließt sich die Lnav einfach wieder.

                    So ich habe eine Lösung.
                    Ich hatte vor einiger Zeit mal die anderen Material Adapter getestet diese aber wieder deinstalliert und gelöscht aber scheinbar hat der ioBroker diese eben nicht gelöscht. Nachdem ich in ioBroker Ordnern zumgestöbert habe sind mit einige Ordner von den Adaptern aufgefallen und habe diese manuell gelöscht. Danach ein restart und nun geht es alles so wie es soll.

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

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

                    Danach ein restart und nun geht es alles so wie es soll.

                    Super - darauf wäre ich so nicht gekommen. Viel Spaß und Erfolg!

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

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

                      @Uhula probiere gerade mdui-show480 und mdui-hide480 aus. Leider funktioniert es nicht so wie ich gedacht habe.
                      Bei mdui-show480 sollte doch die Abkürzung angezeigt werden und bei mdui-hide480 die "lange Version"!?

                      Auf dem Smartphone wird es richtig angezeigt (WZ, Wohnzimmer)

                      Bildschirmfoto 2020-06-07 um 01.22.55.png

                      Auf dem PC verschwindet das Nav-Icon komplett

                      Bildschirmfoto 2020-06-07 um 01.25.31.png

                      Im Editor ist es zwar noch vorhanden aber nicht mehr sichtbar.

                      Bildschirmfoto 2020-06-07 um 01.24.19.png

                      MD CSS Version 2.5

                      Hab ich es falsch verwendet? Hast Du dazu einen Tipp? :grimacing:

                      UhulaU 1 Antwort Letzte Antwort
                      0
                      • D der-eine

                        @Uhula probiere gerade mdui-show480 und mdui-hide480 aus. Leider funktioniert es nicht so wie ich gedacht habe.
                        Bei mdui-show480 sollte doch die Abkürzung angezeigt werden und bei mdui-hide480 die "lange Version"!?

                        Auf dem Smartphone wird es richtig angezeigt (WZ, Wohnzimmer)

                        Bildschirmfoto 2020-06-07 um 01.22.55.png

                        Auf dem PC verschwindet das Nav-Icon komplett

                        Bildschirmfoto 2020-06-07 um 01.25.31.png

                        Im Editor ist es zwar noch vorhanden aber nicht mehr sichtbar.

                        Bildschirmfoto 2020-06-07 um 01.24.19.png

                        MD CSS Version 2.5

                        Hab ich es falsch verwendet? Hast Du dazu einen Tipp? :grimacing:

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

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

                        Hast Du dazu einen Tipp?

                        Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

                        D 3 Antworten Letzte Antwort
                        0
                        • UhulaU Uhula

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

                          Hast Du dazu einen Tipp?

                          Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

                          @Uhula danke. Das erklärt das „Problem“ und ein nicht gefragtes. :joy:

                          Geht das bei einem Projekt, dass am Smartphone nur über das Burgermenü die lnav geöffnet wird und am Tablet immer offen ist? :thinking_face:

                          UhulaU 1 Antwort Letzte Antwort
                          0
                          • D der-eine

                            @Uhula danke. Das erklärt das „Problem“ und ein nicht gefragtes. :joy:

                            Geht das bei einem Projekt, dass am Smartphone nur über das Burgermenü die lnav geöffnet wird und am Tablet immer offen ist? :thinking_face:

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

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

                            Geht das bei einem Projekt, dass am Smartphone nur über das Burgermenü die lnav geöffnet wird und am Tablet immer offen ist?

                            Logo. Dafür gibt es in der Konfiguration
                            0feaa9bc-f8c7-42bc-b77c-4c3d775c088b-image.png
                            wo man die Anzahl der Pixel angibt, ab der das automatische Öffnen funktionieren soll.

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

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

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

                              Geht das bei einem Projekt, dass am Smartphone nur über das Burgermenü die lnav geöffnet wird und am Tablet immer offen ist?

                              Logo. Dafür gibt es in der Konfiguration
                              0feaa9bc-f8c7-42bc-b77c-4c3d775c088b-image.png
                              wo man die Anzahl der Pixel angibt, ab der das automatische Öffnen funktionieren soll.

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

                              @Uhula

                              Gibt es eine Möglichkeit, dass die tnav sich mit nach rechts verschiebt? Die tnav verschwindet wenn man die lnav fixiert

                              Unbenannt.PNG

                              Unbenannt1.PNG

                              1 Antwort Letzte Antwort
                              0
                              • UhulaU Uhula

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

                                Geht das bei einem Projekt, dass am Smartphone nur über das Burgermenü die lnav geöffnet wird und am Tablet immer offen ist?

                                Logo. Dafür gibt es in der Konfiguration
                                0feaa9bc-f8c7-42bc-b77c-4c3d775c088b-image.png
                                wo man die Anzahl der Pixel angibt, ab der das automatische Öffnen funktionieren soll.

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

                                @Uhula danke Dir. :+1: das MD CSS ist so riesig das man viele Sachen einfach wieder vergisst. Das Fenster hab ich schon mal gesehen. :joy:

                                1 Antwort Letzte Antwort
                                0
                                • UhulaU Uhula

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

                                  Hast Du dazu einen Tipp?

                                  Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

                                  @Dominik-F sollte das nicht genau das gleiche sein wie bei mir?
                                  @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                  Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

                                  Dominik F.D 1 Antwort Letzte Antwort
                                  1
                                  • UhulaU Uhula

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

                                    Hast Du dazu einen Tipp?

                                    Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

                                    @Uhula sorry aber es geht immer noch nicht. Was könnte denn noch sein?

                                    lnav fixiert muss ich ja nicht eingeben oder?

                                    Bildschirmfoto 2020-06-07 um 20.20.04.png

                                    UhulaU 1 Antwort Letzte Antwort
                                    0
                                    • D der-eine

                                      @Dominik-F sollte das nicht genau das gleiche sein wie bei mir?
                                      @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                      Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

                                      @der-eine

                                      du hast recht, es funktioniert nun. vielen Dank.

                                      1 Antwort Letzte Antwort
                                      0
                                      • D der-eine

                                        @Uhula sorry aber es geht immer noch nicht. Was könnte denn noch sein?

                                        lnav fixiert muss ich ja nicht eingeben oder?

                                        Bildschirmfoto 2020-06-07 um 20.20.04.png

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

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

                                        lnav fixiert muss ich ja nicht eingeben oder?

                                        Du hast die mdui-hide480 und mdui-show480 Angabe auch in der CSS Angabe drin, damit blendest du das Widget komplett aus. Du möchtest aber nur den Text variieren, also darf die mdui-hide480 und mdui-show480 Angabe auch nur im Text sein.

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

                                        D 1 Antwort Letzte Antwort
                                        1
                                        • UhulaU Uhula

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

                                          lnav fixiert muss ich ja nicht eingeben oder?

                                          Du hast die mdui-hide480 und mdui-show480 Angabe auch in der CSS Angabe drin, damit blendest du das Widget komplett aus. Du möchtest aber nur den Text variieren, also darf die mdui-hide480 und mdui-show480 Angabe auch nur im Text sein.

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

                                          @Uhula :man-facepalming: da is der Fehler jetzt läuft es. Danke dachte die Anweisungen gehören auch nochmal ins CSS.

                                          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

                                          717

                                          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