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

NEWS

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 220.6k Aufrufe 68 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.
  • UhulaU Offline
    UhulaU Offline
    Uhula
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    0
    • S Offline
      S Offline
      speedy78
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      0
      • K Offline
        K Offline
        Kai0182
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        0
        • UhulaU Offline
          UhulaU Offline
          Uhula
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          0
          • S Offline
            S Offline
            speedy78
            schrieb am zuletzt editiert von
            #136

            Hatte ich mir fast gedacht :)

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

            1 Antwort Letzte Antwort
            0
            • UhulaU Offline
              UhulaU Offline
              Uhula
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              0
              • S Offline
                S Offline
                speedy78
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                0
                • UhulaU Offline
                  UhulaU Offline
                  Uhula
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  0
                  • S Offline
                    S Offline
                    speedy78
                    schrieb am zuletzt editiert von
                    #140

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

                    1 Antwort Letzte Antwort
                    0
                    • MeistertrM Offline
                      MeistertrM Offline
                      Meistertr
                      Developer
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • htreckslerH Offline
                        htreckslerH Offline
                        htrecksler
                        Forum Testing
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        0
                        • UhulaU Offline
                          UhulaU Offline
                          Uhula
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          0
                          • htreckslerH Offline
                            htreckslerH Offline
                            htrecksler
                            Forum Testing
                            schrieb am zuletzt editiert von
                            #144

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

                            Gruss Hermann

                            ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

                            1 Antwort Letzte Antwort
                            0
                            • ruhr70R Offline
                              ruhr70R Offline
                              ruhr70
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              0
                              • UhulaU Offline
                                UhulaU Offline
                                Uhula
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                0
                                • P Offline
                                  P Offline
                                  Pman
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  0
                                  • ? Offline
                                    ? Offline
                                    Ein ehemaliger Benutzer
                                    schrieb am zuletzt editiert von
                                    #148

                                    Ich habe mittlerweile eine sehr umfangreiche Anzahl an Views erstellt für meine mobile Anzeige.

                                    Ich zeige in der Application-Bar den Titel an (z.B. Alarm, Beleuchtung, Räume, Solar, Temperatur, …).

                                    Aktuell lege ich wegen der verschiedenen Titeln immer eine weitere View abarXYZ an.

                                    Das empfinde ich etwas übertrieben und unübersichtlich.

                                    Kennt jemand eine Idee, wie ich dynamisch den Titel in der Application-Bar anzeigen kann und tritzdem nur eine View abarAll verwenden kann?

                                    Vielen Dank für Eure Ideen

                                    1 Antwort Letzte Antwort
                                    0
                                    • UhulaU Offline
                                      UhulaU Offline
                                      Uhula
                                      schrieb am zuletzt editiert von
                                      #149

                                      @nisio:

                                      Kennt jemand eine Idee, wie ich dynamisch den Titel in der Application-Bar anzeigen kann und tritzdem nur eine View abarAll verwenden kann?

                                      Vielen Dank für Eure Ideen `
                                      Es müsste gehen, wenn du auf deinen page-Views, die eigentlich nur View-in-View Widgets haben, ein HTML-text Widget direkt einfügst und dieses "über" den anderen platzierst. Also Zuweisung von z-index=200 o.ä. Dieses Widget verschiebst du dann an die passende Position in den Kopfbereich. Zu breit solltest du es nicht machen, da es nicht dem responsive design unterliegt.

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

                                      1 Antwort Letzte Antwort
                                      0
                                      • ? Offline
                                        ? Offline
                                        Ein ehemaliger Benutzer
                                        schrieb am zuletzt editiert von
                                        #150

                                        @Uhula: Funktioniert bestens

                                        1 Antwort Letzte Antwort
                                        0
                                        • Z Offline
                                          Z Offline
                                          Zeus110577
                                          schrieb am zuletzt editiert von
                                          #151

                                          Hi, gibts die möglichkeit ein Dropdown Menü mit dem Design zu gestalten für die Menüleiste? z.B für ne Link-Liste ohne es über die Sidebars zu lösen.

                                          Übrigens sehr n1 das es hier umgesetzt wurde.

                                          Beste Grüße

                                          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

                                          525

                                          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