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
    2.0k

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uivismaterial css
717 Beiträge 74 Kommentatoren 178.0k 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.
  • Stephan SchleichS Stephan Schleich

    Ich bekomme folgende Fehlermeldung, Script ist auf die Vis angepasst.
    Hab ich irgendwo was vergessen?
    fe01824c-52b5-422e-b3cc-35346b9f9f1c-image.png

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

    @Stephan-Schleich

    Es gibt in VIS, dort wo du das CSS Script einfügst auch einen Reiter Script, da musst du das Script einfügen und nicht unter Java

    Unbenannt.PNG

    Stephan SchleichS 1 Antwort Letzte Antwort
    1
    • D der-eine

      @der-eine
      Ich habe das Dashboard nun einbinden können, vielen Dank für die Hilfe. Mir fällt nur auf, dass sich die Anzeige nicht selbstständig aktualisiert und ich bevor ich Änderungen sehe erst die Anzeige einmal umstellen muss zu z.B. einer Woche und dann wieder auf 1 Tag damit es sich aktualsiert. Hast du da noch einen Tipp für mich?

      @Dominik-F nein, sorry ist bei mir auch so und hab noch keine Lösung dafür.

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

      @der-eine

      Okay, dann kann man da wohl nix machen, dank dir

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

        @Stephan-Schleich

        Es gibt in VIS, dort wo du das CSS Script einfügst auch einen Reiter Script, da musst du das Script einfügen und nicht unter Java

        Unbenannt.PNG

        Stephan SchleichS Offline
        Stephan SchleichS Offline
        Stephan Schleich
        schrieb am zuletzt editiert von
        #86

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

        @Stephan-Schleich

        Es gibt in VIS, dort wo du das CSS Script einfügst auch einen Reiter Script, da musst du das Script einfügen und nicht unter Java

        Unbenannt.PNG

        Danke Dominik, ich doofi haha, danke jetzt geht's ^^

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

          @Uhula
          Das würde wenn ich jetzt richtig getestet habe bedeuten, dass ich von dem CSS weg müsste und das raised etc nachbauen müsste, was schade wäre
          Ich habe als Test dieses Widget genutzt und wollte folgende Farbe anstatt mdui-green-bg nutzen :#02c908. Das mdui-green-bg muss ich dann entfernen damit es funktioniert, das Widget sieht danach leider nicht mehr so "schön" aus

          [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","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,"class":"mdui-card-raised mdui-green-bg mdui-center mdui-label","g_last_change":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,"html":"IP: {tr-064.0.devices.raspberrypi4-io.lastIP}","comment":""},"style":{"left":"16px","top":"163px","width":"150px","height":"40px","z-index":0,"background":"","background-color":""},"widgetSet":"basic"}]
          
          UhulaU Offline
          UhulaU Offline
          Uhula
          schrieb am zuletzt editiert von
          #87

          @Dominik-F Stimmt, da du mdui-card-raised verwendest, wirkt sich die eigene background-color natürlich auf das gesamte Widget aus, nicht nur auf den inneren "card"-Anteil. Du "missbrauchst" hier ein wenig die mdui-card Zuweisung, welche z.B. auch margins und paddings setzt.
          Mit einer eigenen background-color musst du, wie du erkannt hast, die mdui-card-raised nachbilden und als CSS entfernen. Hier ein Beispiel, wie das Widget dann aussieht (eigene shadow/border-radius usw)

          [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","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,"class":"mdui-center mdui-label ","g_last_change":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,"html":"IP: 0.0.0.0","comment":"xmdui-card-raised xmdui-green-bg xmdui-center xmdui-label"},"style":{"left":"16px","top":"163px","width":"150px","height":"40px","z-index":0,"background":"#02c908","box-shadow":"0 0 0 1px rgba(255,255,255,0.025) inset, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)","border-radius":"4px"},"widgetSet":"basic"}]
          


          Grafana-refresh funktioniert, es muss nur in der URL (Quelle) mit angegeben werden. Bsp: &refresh=5m ergänzen.

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

          Dominik F.D 1 Antwort Letzte Antwort
          0
          • D Offline
            D Offline
            der-eine
            schrieb am zuletzt editiert von der-eine
            #88

            @Uhula nochmal eine Frage zur lnav und rnav. Wenn ich die rnav öffne und irgendwo auf den Display hinklicke fährt sie wieder ganz normal ein. Das macht die lnav nicht. Sollte das nicht auch so funktionieren? Ich kann sie nur schließen wenn ich auf das Hamburger-Menü-Symbol klicke. Sind die beiden nicht "gleich" von der Funktion her?

            1 Antwort Letzte Antwort
            0
            • UhulaU Uhula

              @Dominik-F Stimmt, da du mdui-card-raised verwendest, wirkt sich die eigene background-color natürlich auf das gesamte Widget aus, nicht nur auf den inneren "card"-Anteil. Du "missbrauchst" hier ein wenig die mdui-card Zuweisung, welche z.B. auch margins und paddings setzt.
              Mit einer eigenen background-color musst du, wie du erkannt hast, die mdui-card-raised nachbilden und als CSS entfernen. Hier ein Beispiel, wie das Widget dann aussieht (eigene shadow/border-radius usw)

              [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","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,"class":"mdui-center mdui-label ","g_last_change":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,"html":"IP: 0.0.0.0","comment":"xmdui-card-raised xmdui-green-bg xmdui-center xmdui-label"},"style":{"left":"16px","top":"163px","width":"150px","height":"40px","z-index":0,"background":"#02c908","box-shadow":"0 0 0 1px rgba(255,255,255,0.025) inset, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)","border-radius":"4px"},"widgetSet":"basic"}]
              


              Grafana-refresh funktioniert, es muss nur in der URL (Quelle) mit angegeben werden. Bsp: &refresh=5m ergänzen.

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

              @Uhula

              Super, das Widget sieht genauso aus wie es sein sollte und hab nun eine Vorlage für den Shadow falls ich sowas nochmal brauche.

              Das mit dem Refresh funktioniert bei mir nicht richtig.

              http://192.168.178.38:3000/d/UxKIGxkgz/temperaturen?orgId=1&refresh=30m&kiosk&from=1582543232156&to=1582629632156&panelId=2&fullscreen
              

              Refresh ist dort schon enthalten und der aktualisiert sich bei mir trotzdem nicht.

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

                @Uhula

                Super, das Widget sieht genauso aus wie es sein sollte und hab nun eine Vorlage für den Shadow falls ich sowas nochmal brauche.

                Das mit dem Refresh funktioniert bei mir nicht richtig.

                http://192.168.178.38:3000/d/UxKIGxkgz/temperaturen?orgId=1&refresh=30m&kiosk&from=1582543232156&to=1582629632156&panelId=2&fullscreen
                

                Refresh ist dort schon enthalten und der aktualisiert sich bei mir trotzdem nicht.

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

                @Dominik-F bei mir sieht der link so aus:

                http://192.168.178.51:3000/d/BFQXFoQZz/raume?orgId=1&from=1582794576508&to=1582880976508&panelId=10&fullscreen&kiosk&theme=dark&refresh=1m
                

                und er wird auch aktualisiert.

                1 Antwort Letzte Antwort
                0
                • mrFenyxM mrFenyx

                  @Bastelritius Hi, wenn du ioBroker.vis-material benutzt dann bitte deinstallieren. Es benutzt eine alte Version von MDUI und macht alles durcheinander.

                  BastelritiusB Offline
                  BastelritiusB Offline
                  Bastelritius
                  schrieb am zuletzt editiert von
                  #91

                  @mrFenyx: Danke, ich glaube das war es. Dann kann ich ja mal etwas rumprobieren.

                  1 Antwort Letzte Antwort
                  0
                  • Stefan GlückS Offline
                    Stefan GlückS Offline
                    Stefan Glück
                    schrieb am zuletzt editiert von Stefan Glück
                    #92

                    hallo,

                    ich würde gerne deine 2 Demo Projekte importieren, bekomme aber immer wieder fehlermeldungen:
                    acb2081b-b636-4ba0-965f-45c83bfe67ae-image.png
                    hat vielleicht jemand eine idee für mich?

                    danke

                    edit: funktioniert. da hatte ich beim Download ein Problem

                    Dominik F.D 1 Antwort Letzte Antwort
                    0
                    • Stephan SchleichS Offline
                      Stephan SchleichS Offline
                      Stephan Schleich
                      schrieb am zuletzt editiert von
                      #93

                      Ich hab ein Problem mit der v2.1.1 23.02.2020, und zwar lassen sich dadurch iframes nicht mehr verschieben.

                      Eine andere Frage noch am Rande, ersetzte ich meinen Script Baustein komplett durch deinen oder füge ich den nur dazu, was bewirken diese eigentlic, vor allem was ist wenn ich deins mal wieder lösche und mein altes nicht mehr habe, kommt es dann zu Problemen?

                      UhulaU 1 Antwort Letzte Antwort
                      0
                      • Stefan GlückS Stefan Glück

                        hallo,

                        ich würde gerne deine 2 Demo Projekte importieren, bekomme aber immer wieder fehlermeldungen:
                        acb2081b-b636-4ba0-965f-45c83bfe67ae-image.png
                        hat vielleicht jemand eine idee für mich?

                        danke

                        edit: funktioniert. da hatte ich beim Download ein Problem

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

                        @Stefan-Glück

                        hast du dir das Projekt als Zip Datei heruntergeladen und dann versucht diese ZIP Datei zu importieren?

                        @Stephan-Schleich
                        Wenn du ein eigenes CSS Skript geschrieben hast, dann kann es natürlich zu Problemen kommen, muss aber nicht unbedingt je nachdem was du gezaubert hast. Du legst ja selber fest wann du was vom Skript nutzt oder nicht.
                        Uhulas Projekt ist darauf ausgelegt, dass du sein CSS Script und das Script dazu nutzt. Dieses bewirkt optische Veränderungen verschiedener Widgets und viele Anpassungsmöglichkeiten. Wenn du seins löscht und deine Vis auf seiner CSS aufgebaut hast, dann kommt es auf jedenfall zu optischen Problemen und vieles wird nicht mehr funktionieren bzw sehr komisch aussehen. Ich bin mir aber auch nicht sicher ob ich deiner letzte Frage richtig verstanden habe :D

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

                          @Stefan-Glück

                          hast du dir das Projekt als Zip Datei heruntergeladen und dann versucht diese ZIP Datei zu importieren?

                          @Stephan-Schleich
                          Wenn du ein eigenes CSS Skript geschrieben hast, dann kann es natürlich zu Problemen kommen, muss aber nicht unbedingt je nachdem was du gezaubert hast. Du legst ja selber fest wann du was vom Skript nutzt oder nicht.
                          Uhulas Projekt ist darauf ausgelegt, dass du sein CSS Script und das Script dazu nutzt. Dieses bewirkt optische Veränderungen verschiedener Widgets und viele Anpassungsmöglichkeiten. Wenn du seins löscht und deine Vis auf seiner CSS aufgebaut hast, dann kommt es auf jedenfall zu optischen Problemen und vieles wird nicht mehr funktionieren bzw sehr komisch aussehen. Ich bin mir aber auch nicht sicher ob ich deiner letzte Frage richtig verstanden habe :D

                          Stephan SchleichS Offline
                          Stephan SchleichS Offline
                          Stephan Schleich
                          schrieb am zuletzt editiert von
                          #95

                          @Dominik-F Danke für die Infos.
                          Ich hab den CSS und Script Code einfach in mein Projekt kopiert. Unter Script steht z.b. schon was drin wenn ich das lösche verändert sich auch nichts ob gut oder schlecht weiß ich nicht, hab dort bisher nie was gemacht, deswegen wusst ich nicht ob überschreiben oder dazu kopieren.

                          gehen bei dir denn die iframes wenn du neue hinzufügst?

                          Dominik F.D 1 Antwort Letzte Antwort
                          0
                          • Stephan SchleichS Stephan Schleich

                            @Dominik-F Danke für die Infos.
                            Ich hab den CSS und Script Code einfach in mein Projekt kopiert. Unter Script steht z.b. schon was drin wenn ich das lösche verändert sich auch nichts ob gut oder schlecht weiß ich nicht, hab dort bisher nie was gemacht, deswegen wusst ich nicht ob überschreiben oder dazu kopieren.

                            gehen bei dir denn die iframes wenn du neue hinzufügst?

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

                            @Stephan-Schleich

                            Ich hab bisher noch eine ältere Version laufen und bin da selber mit den Iframes und Grafana am rumprobieren. Ich konnte bisher aber die Iframes problemlos einfügen.

                            1 Antwort Letzte Antwort
                            0
                            • Stephan SchleichS Stephan Schleich

                              Ich hab ein Problem mit der v2.1.1 23.02.2020, und zwar lassen sich dadurch iframes nicht mehr verschieben.

                              Eine andere Frage noch am Rande, ersetzte ich meinen Script Baustein komplett durch deinen oder füge ich den nur dazu, was bewirken diese eigentlic, vor allem was ist wenn ich deins mal wieder lösche und mein altes nicht mehr habe, kommt es dann zu Problemen?

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

                              @Stephan-Schleich Wenn du mit "nicht verschieben" meinst, dass du die iframes nicht mehr per Klick auswählen kannst, dass Problem habe ich auch manchmal. Du kannst es aber immer über "Widgets | Aktives Widget" aus der Widgetliste auswählen. Eine Ursache kenne ich nicht, das Script scheidet aus, da es im vis Editor nicht ausgeführt wird;: evtl. eine CSS Anweisung, muss ich mal suchen.

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

                              1 Antwort Letzte Antwort
                              0
                              • mrFenyxM Offline
                                mrFenyxM Offline
                                mrFenyx
                                schrieb am zuletzt editiert von
                                #98

                                Hi, kann ich in tnav ein widget haben das nicht wie alle andere aligned sind sondern, z.B. ganz rechts? Die wären auch keine navitems.

                                UhulaU 1 Antwort Letzte Antwort
                                0
                                • mrFenyxM mrFenyx

                                  Hi, kann ich in tnav ein widget haben das nicht wie alle andere aligned sind sondern, z.B. ganz rechts? Die wären auch keine navitems.

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

                                  @mrFenyx Klar, du musst es mit "mdui-noflex" nur aus der flex-Anordnung rausnehmen, dann kannst du es beliebig positionieren, z.B. mit: left=calc(100% - 40px). Kann auch weiterhin ein "mdui-navitem" sein, muss aber nicht.

                                  [{"tpl":"tplJquiIconNav","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,"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,"class":"mdui-navitem  mdui-noflex ","text":"<i class='material-icons'>help</i>","nav_view":"pageDemoEx1","g_last_change":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},"style":{"left":"calc(100% - 40px)","top":"0px","width":"40px","height":"39px","position":""},"widgetSet":"jqui"}]
                                  

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

                                  mrFenyxM jpgorganizerJ 2 Antworten Letzte Antwort
                                  1
                                  • T Offline
                                    T Offline
                                    Tirador
                                    schrieb am zuletzt editiert von
                                    #100

                                    Hallo,

                                    ich probiere nun auch meine ersten Gehversuche.
                                    Dabei versuche ich die "Grid-Struktur" mit mdui-cols-n umzusetzen.

                                    Ich hätte gerne das Responsive Design so, dass es sowohl im Quer- als auch Hochformat gut aussieht.

                                    Mein Handy hat die folgende Auflösung:

                                    • 396px im Hochformat
                                    • 766px im Querformat

                                    Im Hochformat passt prinzipiell nur eine Card auf den Schirm. Im Querformat könnte man zwei nebeneinander packen.

                                    Muss ich dann alles auf den kleinsten gemeinsamen Nenner ausrichten, d.h. 766 / 2 = 383 px?

                                    Ich habe gesehen das es im CSS für jede mdui-col-x Breite ein min-width und ein max-width gibt.
                                    Oder muss ich dann max-width auf 396 px einstellen und min-width auf 383 px?

                                    Die weitere Verkomplizierung.
                                    Es gibt nun noch ein Tablet, dass ich mit dem gleichen Design füttern wollen würde.

                                    Das Tablet hat die folgende Auflösung:

                                    • 587px im Hochformat
                                    • 939px im Querformat

                                    Ist das überhaupt mit einem responsive Design alles unter einen Hut zu zaubern?

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

                                      Hallo,

                                      ich probiere nun auch meine ersten Gehversuche.
                                      Dabei versuche ich die "Grid-Struktur" mit mdui-cols-n umzusetzen.

                                      Ich hätte gerne das Responsive Design so, dass es sowohl im Quer- als auch Hochformat gut aussieht.

                                      Mein Handy hat die folgende Auflösung:

                                      • 396px im Hochformat
                                      • 766px im Querformat

                                      Im Hochformat passt prinzipiell nur eine Card auf den Schirm. Im Querformat könnte man zwei nebeneinander packen.

                                      Muss ich dann alles auf den kleinsten gemeinsamen Nenner ausrichten, d.h. 766 / 2 = 383 px?

                                      Ich habe gesehen das es im CSS für jede mdui-col-x Breite ein min-width und ein max-width gibt.
                                      Oder muss ich dann max-width auf 396 px einstellen und min-width auf 383 px?

                                      Die weitere Verkomplizierung.
                                      Es gibt nun noch ein Tablet, dass ich mit dem gleichen Design füttern wollen würde.

                                      Das Tablet hat die folgende Auflösung:

                                      • 587px im Hochformat
                                      • 939px im Querformat

                                      Ist das überhaupt mit einem responsive Design alles unter einen Hut zu zaubern?

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

                                      @Tirador
                                      Du musst dann mdui-cols-4-toc-5 einstellen, dann passt sich die Breite automatisch auf 320px-400px an. Beim quer sollten die sich dann nebeneinander anordnen. Du musst immer vom kleinsten ausgehen.

                                      1 Antwort Letzte Antwort
                                      0
                                      • UhulaU Uhula

                                        @mrFenyx Klar, du musst es mit "mdui-noflex" nur aus der flex-Anordnung rausnehmen, dann kannst du es beliebig positionieren, z.B. mit: left=calc(100% - 40px). Kann auch weiterhin ein "mdui-navitem" sein, muss aber nicht.

                                        [{"tpl":"tplJquiIconNav","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,"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,"class":"mdui-navitem  mdui-noflex ","text":"<i class='material-icons'>help</i>","nav_view":"pageDemoEx1","g_last_change":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},"style":{"left":"calc(100% - 40px)","top":"0px","width":"40px","height":"39px","position":""},"widgetSet":"jqui"}]
                                        

                                        mrFenyxM Offline
                                        mrFenyxM Offline
                                        mrFenyx
                                        schrieb am zuletzt editiert von
                                        #102

                                        @Uhula Super, danke! :+1:

                                        B 1 Antwort Letzte Antwort
                                        0
                                        • mrFenyxM mrFenyx

                                          @Uhula Super, danke! :+1:

                                          B Offline
                                          B Offline
                                          BoehserWolf
                                          schrieb am zuletzt editiert von BoehserWolf
                                          #103

                                          @Uhula

                                          Habe ein Problem mit dem Importieren der "Einstellungen" cards aus MD_Demo in MD_Simple.

                                          Die Idee war:

                                          • Export/Import der entsprechenden Cards aus MD_Demo, also cardConfig, cardConfigCards, cardConfigColors in ein neues Projekt auf Basis von MD_Simple
                                          • sowie Export/Import des nötigen Einstellungen Widgets aus lnav
                                          • Einstellungen im neuen Projekt nutzen

                                          Das haut leider nicht hin, die Einstellungen lassen sich nicht anpassen, es passiert einfach nichts im neuen Projekt.
                                          Habe ich parallel das importierte MD_Demo Projekt in einem anderen Browser Tab auf, werden die Einstellungen dieses Projekts angepasst.

                                          Alles klar dachte ich, dann ändere ich die Bezeichnungen der Object IDs in den Widgets von cardConfigCards, cardConfigColors von demo_config_xxx in einen anderen Namen.
                                          Bspw. in cardConfigCards das Widget zur Card-Darstell. hat als Object ID "demo_card_title_color", also geändert in "proj_card_title_color". Das habe ich analog für alle Widgets in den entsprechenden Cards vorgenommen. Dann kann ich jedoch nichts mehr konfigurieren.

                                          Habe schon alles Mögliche probiert um das zum Laufen zu bringen...

                                          Bin für jeden Tipp dankbar.

                                          Hinweis am Rande: Ein Verweis auf eine Übersicht aller Material Design Icons habe ich hier gefunden. Würde vorschlagen einen Hinweis in github zu setzen. Dann hat man schnell die Übersicht über die Icons gefunden ohne lange googeln zu müssen.

                                          P UhulaU 2 Antworten Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          325

                                          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