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] Material Design CSS für ioBroker.vis

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.1k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    939

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

[Projekt] Material Design CSS für ioBroker.vis

Scheduled Pinned Locked Moved Visualisierung
650 Posts 111 Posters 231.1k Views 68 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.
  • UhulaU Offline
    UhulaU Offline
    Uhula
    wrote on last edited by
    #128

    @Uhula:

    Wie kann ich das verhindern, außer die Buttons zu verschieben? `
    Das kann ich dir leider auch (noch) nicht beantworten. Ich konnte das bisher in meinen Projekten noch nicht nachstellen. Hier im Forum gibt es einige Themen zum "Entprellen" der Views untereinander. Bisher, soweit ich das beurteilen kann, ohne eindeutige Lösung. Es wäre schön, wenn ich ein solches Projekt zur Verfügung gestellt bekomme; inkl der Infos, mit welchem Browser auf welcher Hardware es passiert (da kann e sgroße Unterschiede geben, z.B. ist ein KLICK nicht gleich einem TAP). Dann kann ich zumindest eine Abhängigkeit zum Material Design untersuchen. Danke.

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

    1 Reply Last reply
    0
    • K Offline
      K Offline
      Kai0182
      wrote on last edited by
      #129

      Vorneweg, das Design gefällt mir außerordentlich gut.

      Aber scheinbar bin ich schon zu blöd, das Beispiel Projekt zu importieren um damit zu spielen.

      Ich lade das ZIP File runter, importiere dies dann als neues Projekt in mein VIS, aber danach passiert nichts mehr.

      Es entsteht einfach ein neues Projekt mit dem Standard Demo Bild.

      Kein importiertes CSS, keine Buttons, kein nichts.

      Entweder steh ich auf dem Schlauch oder ich hab doch was vergessen

      1 Reply Last reply
      0
      • UhulaU Offline
        UhulaU Offline
        Uhula
        wrote on last edited by
        #130

        @Kai0182:

        Entweder steh ich auf dem Schlauch oder ich hab doch was vergessen `
        Nö, klingt alles korrekt. ZIP als Projekt importieren, mehr ist nicht notwendig. Wenn beim Import irgendwas schief läuft, schaltet vis wohl auf ein Standardprojekt um. An eine Abhängigkeit von installierten Adaptern glaube ich nicht, basic und jqui reichen eigentlich aus (timeandweather wird noch genutzt, stört aber nicht, wenn der Adpater nicht installiert wurde).

        Welche vis-Version hast du im Einsatz? Erstellt wurden die Projekte mit 0.15.5, laufen aber auch unter der aktuellen vis-Version 1.0.4.

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

        1 Reply Last reply
        0
        • K Offline
          K Offline
          Kai0182
          wrote on last edited by
          #131

          Vis läuft bei mir auf 1.0.4.

          Habe jetzt nochmal importiert, mir wird auch immer bestätigt, dass das Projekt richtig importiert wurde.

          Aber danach wieder alles leer

          1 Reply Last reply
          0
          • UhulaU Offline
            UhulaU Offline
            Uhula
            wrote on last edited by
            #132

            Hast du schon mal beide Projekte versucht, funktionieren beide nicht? Also MD_Demo und MD_Simple? Kannst du die Projekte unter dem vis Dateimanager korrekt sehen? Kannst du evtl die ZIP Datei öffnen und via vis Dateimanager die Dateien dann korrekt hochladen?

            Eine Ursache kann ich leider nicht erkennen.

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

            1 Reply Last reply
            0
            • S Offline
              S Offline
              speedy78
              wrote on last edited by
              #133

              Mal eine ganz einfache Frage…..

              Wie kann ich die Eigenschaft von mdui-raisedbutton ändern. Da ich damit einen Befehl Ausführen muss setze xxx bei Drücken.

              Nur leider bekomme ich die Größe nicht angepasst ist einfach zu Groß der Text. Den Button kann ich ja anpassen nur ändert sich der Text nicht dazu.

              :)

              1 Reply Last reply
              0
              • K Offline
                K Offline
                Kai0182
                wrote on last edited by
                #134

                Ich hab es gefunden.

                Die Projekte wurden zwar hochgeladen aber irgendwie falsch ver/entpackt.

                Ich vermute fast das liegt daran, das ich mit den ZIP Dateien am Mac Probleme hatte.

                Habe jetzt manuell das Ganze über den Dateimanager hochgeladen in die richtigen Verzeichnisse und siehe da, jetzt passt es.

                Vielen Dank für die Unterstützung
                4078_bildschirmfoto_2017-11-20_um_17.50.19.png

                1 Reply Last reply
                0
                • UhulaU Offline
                  UhulaU Offline
                  Uhula
                  wrote on last edited by
                  #135

                  @Kai0182:

                  Vielen Dank für die Unterstützung `
                  Gerne

                  @speedy78:

                  Mal eine ganz einfache Frage….. `
                  … die ich leider nicht verstehe;-) Vielleicht hilft ein kleines Bild vom Problem mir auf die Sprünge.

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

                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    speedy78
                    wrote on last edited by
                    #136

                    Hatte ich mir fast gedacht :)

                    Ich möchte die Button klein haben inkl. der Schrift !
                    3717_mdui-raised.png

                    1 Reply Last reply
                    0
                    • UhulaU Offline
                      UhulaU Offline
                      Uhula
                      wrote on last edited by
                      #137

                      @speedy78:

                      Ich möchte die Button klein haben inkl. der Schrift ! `
                      Das ist das Blöde an einem vorgegeben Design, man kann es nicht leicht ändern (ist auch so gewollt) ;-)

                      Durch die mdui-raisedbutton CSS Zuweisung wird die Schriftgröße auf 1em (16 Px) festgelegt, das kannst du über die Widget-Eigenschaften auch nicht verändern, da die CSS Zuweisung durch Nutzung von "!important" stärker ist.

                      Du kannst es aber wie folgt lösen:

                      (1) Anlage einer neuen, eigenen CSS Klasse am Ende des CSS-Scripts

                      .mdui-font-small {

                      font-size:0.8em !important;

                      } (2) Zuweisung auch dieser Klasse mdui-font-small in der CSS-Eigenschaft des Widgets

                      Mit der Größenangabe kannst du dann spielen, ob dir 0.8em oder 0.9em oder 0.92em oder 12px oder oder besser passen.

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

                      1 Reply Last reply
                      0
                      • S Offline
                        S Offline
                        speedy78
                        wrote on last edited by
                        #138

                        HAHAHAHAHAHA ich bin jetzt schon so lange am basteln und habe die Werte gesucht bis ich gerade gesehen habe das es bei CSS ( GLOBAL / Projekt ) gibt … * facepalm

                        Aber irgendwas mache ich wohl noch falsch denn leider ändert sich nichts.

                        Der Befehl Funktioniert bei normalen HTML das habe ich gerade getestet. Nur beim Button(Knopftext) leider nicht.

                        Ändere ich den Wert im oberen Bereich geht es ohne Probleme. Sollte es nicht so sein das er es überschreibt wenn ich mdui-small-font als Klasse dazu packe ? !important

                        Update:

                        so bin leider kein HTML / CSS Mensch aber habe es gefunden. Wenn ich das mache geht es.

                        .mdui-raisedbutton-small {

                        font-size:0.6em !important;

                        }
                        3717_mdui-small.png

                        1 Reply Last reply
                        0
                        • UhulaU Offline
                          UhulaU Offline
                          Uhula
                          wrote on last edited by
                          #139

                          @speedy78:

                          Aber irgendwas mache ich wohl noch falsch denn leider ändert sich nichts. `
                          So kann es auch nicht gehen. Du hast die CSS Klasse .mdui-font-small in die CSS aufgenommen, im Widget gibst du aber mdui-small-font ein. Überliest mal leicht, dass font und small vertauscht sind ;-)

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

                          1 Reply Last reply
                          0
                          • S Offline
                            S Offline
                            speedy78
                            wrote on last edited by
                            #140

                            hahahahahahahahahhahaahahahah …. zuviel Text wobei. Jetzt habe ich wieder was gelernt. Und du hattest Recht :oops:

                            1 Reply Last reply
                            0
                            • MeistertrM Offline
                              MeistertrM Offline
                              Meistertr
                              Developer
                              wrote on last edited by
                              #141

                              Es ist echt der Hamma was man mit css und ein paar codezeilen alles ändern kann….
                              1768_2017-11-23_07h35_20.png

                              1 Reply Last reply
                              0
                              • htreckslerH Offline
                                htreckslerH Offline
                                htrecksler
                                Forum Testing
                                wrote on last edited by
                                #142

                                @Uhula:

                                Ich persönlich mag die Textdarstellung, da es nie vorkommt, dass ich die Jalousien auf 14% oder 97% absenken möchte. Außerdem kann man die Fixpunkte frei festlegen. `
                                Kriegt man es vielleicht irgendwie hin, das die Werte im RadioList Widget nicht horizontal sondern vertikal (also untereinander) angezeigt werden?

                                Gruss Hermann

                                ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

                                1 Reply Last reply
                                0
                                • UhulaU Offline
                                  UhulaU Offline
                                  Uhula
                                  wrote on last edited by
                                  #143

                                  @htrecksler:

                                  Kriegt man es vielleicht irgendwie hin, das die Werte im RadioList Widget nicht horizontal sondern vertikal (also untereinander) angezeigt werden? `
                                  Jo. Das "jqui-Radiobuttons Valuelist" Widget rendert sich als , die Texte stehen dabei in

                                  | Elementen. Man muss nur dafür sorgen, dass die | Elemente sich nicht als td, sondern sich als Block-Elemente darstellen.

                                  Wie das?

                                  (1) Du erweiterst deine CSS Anweisungen um

                                  .mdui-radio.mdui-vertical td {

                                  display: block;

                                  }

                                  (2) Und weist dann deinem Widget zusätzlich zum mdui-radio noch die CSS Klasse mdui-vertical zu.

                                  Hinweis: Damit wird vis natürlich ein wenig an der Nase herumgeführt, so dass die width/height Angaben nicht mehr passen. Funktioniert aber trotzdem. |

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

                                  1 Reply Last reply
                                  0
                                  • htreckslerH Offline
                                    htreckslerH Offline
                                    htrecksler
                                    Forum Testing
                                    wrote on last edited by
                                    #144

                                    <size size="150">DANKE</size>…funktioniert natürlich

                                    Gruss Hermann

                                    ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

                                    1 Reply Last reply
                                    0
                                    • ruhr70R Offline
                                      ruhr70R Offline
                                      ruhr70
                                      wrote on last edited by
                                      #145

                                      Echt klasse. Mit dem MD Projekt hat man wieder was zu tun ;-)

                                      Eine Kleinigkeit ist mir aufgefallen.

                                      Unter iOS (sowohl auf dem iPhone, als auch auf dem iPad) öffnet sich der rechte Bereich nicht nach links in den Content, sondern wird rechts angehangen.

                                      Das sieht erst einmal so aus, als ob sich gar nichts öffnet. Wenn man dann mit dem Finger nach links wischt, sieht man auch den Bereich.

                                      Auf allen anderen Geräten funktioniert es wunderbar:

                                      327_2017-12-10_simple_md.png

                                      Ich bin begeistert!

                                      Adapter: Fritzbox, Unify Circuit
                                      Skripte: dynamic hue, Bluetooth Scan, Multi-Ereignisliste

                                      1 Reply Last reply
                                      0
                                      • UhulaU Offline
                                        UhulaU Offline
                                        Uhula
                                        wrote on last edited by
                                        #146

                                        @ruhr70:

                                        Unter iOS … `
                                        Sorry, da kann ich leider nicht helfen. Ich gehöre zu denen, die anderes Obst dem Apfel vorziehen. Nicht weil die Apfelprodukte schlecht wären, sondern einfach weil ich den Hype und die damit verbundenen überzogenen Preise nicht mag ;-)

                                        Wenn mir jemand sagt, was ich ändern müsste, pflege ich es mit ein.

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

                                        1 Reply Last reply
                                        0
                                        • P Offline
                                          P Offline
                                          Pman
                                          wrote on last edited by
                                          #147

                                          Bei Chrome auf Android habe ich das Problem, dass die Menüs bei Wechsel zu einem anderen View nicht schließen. Wenn ich dann zurück zum vorigen View wechsle ist das Menü dort noch geöffnet. Ich denke das hat damit zu tun, dass auf "click" reagiert wird, aber wegen des Touchscreens ein Touch-Event schon den Viewwechsel hervorruft. Wenn ich die click-Events in touchend-Events ändere, wird das Menü korrekt geschlossen, allerdings ist diese Lösung nicht perfekt, da das Menü dann auch beim Versuch zu scrollen verschwindet. Vielleicht hat jemand eine Idee, wie man das korrekt beheben kann?

                                          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

                                          697

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          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