Skip to content
  • 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
Logo
  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.1k

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

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Scheduled Pinned Locked Moved Visualisierung
material uivismaterial css
717 Posts 74 Posters 177.3k Views 77 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Stefan GlückS Offline
    Stefan GlückS Offline
    Stefan Glück
    wrote on last edited by 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 Reply Last reply
    0
    • Stephan SchleichS Offline
      Stephan SchleichS Offline
      Stephan Schleich
      wrote on last edited by
      #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 Reply Last reply
      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.
        wrote on last edited by
        #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 😄

        Stephan SchleichS 1 Reply Last reply
        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 😄

          Stephan SchleichS Offline
          Stephan SchleichS Offline
          Stephan Schleich
          wrote on last edited by
          #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 Reply Last reply
          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.
            wrote on last edited by
            #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 Reply Last reply
            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
              wrote on last edited by
              #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 Reply Last reply
              0
              • mrFenyxM Offline
                mrFenyxM Offline
                mrFenyx
                wrote on last edited by
                #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 Reply Last reply
                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
                  wrote on last edited by
                  #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 Replies Last reply
                  1
                  • T Offline
                    T Offline
                    Tirador
                    wrote on last edited by
                    #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 Reply Last reply
                    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.
                      wrote on last edited by
                      #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 Reply Last reply
                      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
                        wrote on last edited by
                        #102

                        @Uhula Super, danke! 👍

                        B 1 Reply Last reply
                        0
                        • mrFenyxM mrFenyx

                          @Uhula Super, danke! 👍

                          B Offline
                          B Offline
                          BoehserWolf
                          wrote on last edited by 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 Replies Last reply
                          0
                          • B BoehserWolf

                            @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 Offline
                            P Offline
                            Pittini
                            Developer
                            wrote on last edited by
                            #104

                            @BoehserWolf sagte in [Projekt] Material Design CSS v2:

                            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

                            Was in Deiner Auflistung auf jeden Fall fehlt sind die 3 Blöcke aus der abar. Hol die mal noch aus der MD_Demo rüber, dann sollte es klappen. Hab das auch in nem Projekt so gemacht und grundsätzlich klappt das auch.

                            B 1 Reply Last reply
                            0
                            • P Pittini

                              @BoehserWolf sagte in [Projekt] Material Design CSS v2:

                              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

                              Was in Deiner Auflistung auf jeden Fall fehlt sind die 3 Blöcke aus der abar. Hol die mal noch aus der MD_Demo rüber, dann sollte es klappen. Hab das auch in nem Projekt so gemacht und grundsätzlich klappt das auch.

                              B Offline
                              B Offline
                              BoehserWolf
                              wrote on last edited by
                              #105

                              @Pittini
                              Funktioniert einwandfrei bis auf das Select für Primary Color. Das Select reagiert einfach mal gar nicht. Da noch ne Idee?

                              P 1 Reply Last reply
                              0
                              • B BoehserWolf

                                @Pittini
                                Funktioniert einwandfrei bis auf das Select für Primary Color. Das Select reagiert einfach mal gar nicht. Da noch ne Idee?

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

                                @BoehserWolf sagte in [Projekt] Material Design CSS v2:

                                Da noch ne Idee?

                                Beim ändern der Namen vertippt oder einen Eintrag vergessen? Entweder im Config Dialog, in einem der 3 abar Blöcke oder im Css.

                                B 1 Reply Last reply
                                0
                                • P Pittini

                                  @BoehserWolf sagte in [Projekt] Material Design CSS v2:

                                  Da noch ne Idee?

                                  Beim ändern der Namen vertippt oder einen Eintrag vergessen? Entweder im Config Dialog, in einem der 3 abar Blöcke oder im Css.

                                  B Offline
                                  B Offline
                                  BoehserWolf
                                  wrote on last edited by
                                  #107

                                  @Pittini
                                  So ähnlich. Der VIS Editor hatte scheinbar beim Ändern des Namens der Object ID die Werte und Texte verworfen - warum auch immer!?
                                  Also View aus Demo nochmal exportiert und neu importiert. Beim Importieren die Namen der Widgets bereits korrekt angepasst. Jetzt funzt es.

                                  Thx nochmal 👍

                                  1 Reply Last reply
                                  0
                                  • B BoehserWolf

                                    @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.

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

                                    @BoehserWolf Danke, der Link zu den Icons ist im MD_Demo in der Icon-Card drin - kann ich aber auch noch im readme mit aufnehmen.

                                    Den Rest hat @Pittini ja schon mit dir geklärt - hätte ich nicht besser gekonnt 😉

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

                                    1 Reply Last reply
                                    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"}]
                                      

                                      jpgorganizerJ Offline
                                      jpgorganizerJ Offline
                                      jpgorganizer
                                      wrote on last edited by
                                      #109

                                      @Uhula

                                      Du hast weiter oben beschrieben, wie man etwas am rechten Rand ausrichtet. Das kannte ich zwar schon, aber das brachte wieder ein Thema bei mir hoch.

                                      Ausgangsituation ist so, dass ich ein Widget am rechten Rand anheften will, in diesem Fall ein mdui-navitem, trifft aber bei allen Texten zu. Das mache ich so:
                                      ff027729-aefa-45f2-bc75-d5c184611678-grafik.png

                                      Das Problem ist die Breite (width). Im Beispiel steht hier 50px, da hier aktuell der angezeigte Text eben so reinpasst. Da meine Texte aber variabel sind, wird das über kurz oder lang eben zu klein oder zu groß sein. Im einen Fall wird dann abgeschnitten, im anderen Fall ist es nicht mehr rechts aussen.

                                      Dazu müsste ich die tatsächlich notwendige Breite kennen. Also so eine Art text.length(). Oder eine ganz andere Lösung. Ich könnte mir auch vorstellen, dass ich einen maximale Breite verwende und dann innerhalb des Feldes rechtsbündig schreibe. Das habe ich aber bisher nicht hinbekommen. Hast du einen Tipp für mich?

                                      Grüße
                                      jpgorganizer

                                      Bitte keine Fragen per PN, die gehören ins Forum!

                                      ioBroker
                                      smartgarden Adapter für GARDENA smart system
                                      Plattform: Raspberry Pi OS Linux 12 (bookworm), Node.js: v18.18.2, NPM: 9.8.1

                                      mrFenyxM 1 Reply Last reply
                                      0
                                      • jpgorganizerJ jpgorganizer

                                        @Uhula

                                        Du hast weiter oben beschrieben, wie man etwas am rechten Rand ausrichtet. Das kannte ich zwar schon, aber das brachte wieder ein Thema bei mir hoch.

                                        Ausgangsituation ist so, dass ich ein Widget am rechten Rand anheften will, in diesem Fall ein mdui-navitem, trifft aber bei allen Texten zu. Das mache ich so:
                                        ff027729-aefa-45f2-bc75-d5c184611678-grafik.png

                                        Das Problem ist die Breite (width). Im Beispiel steht hier 50px, da hier aktuell der angezeigte Text eben so reinpasst. Da meine Texte aber variabel sind, wird das über kurz oder lang eben zu klein oder zu groß sein. Im einen Fall wird dann abgeschnitten, im anderen Fall ist es nicht mehr rechts aussen.

                                        Dazu müsste ich die tatsächlich notwendige Breite kennen. Also so eine Art text.length(). Oder eine ganz andere Lösung. Ich könnte mir auch vorstellen, dass ich einen maximale Breite verwende und dann innerhalb des Feldes rechtsbündig schreibe. Das habe ich aber bisher nicht hinbekommen. Hast du einen Tipp für mich?

                                        Grüße
                                        jpgorganizer

                                        mrFenyxM Offline
                                        mrFenyxM Offline
                                        mrFenyx
                                        wrote on last edited by
                                        #110

                                        @jpgorganizer Die idee mit "max_length" sollte schon passen. Was du dann tun musst ist im "CSS Font & Text" Bereich das "text-align" zu "right" setzen. Wichtig ist dass du für dieses Element nicht "mdui-center(-v/-h)" benutzt denn dieses überschreibt das normale text-align. Kann sein dass auch andere mdui- Klassen das tun, weiß ich nicht. Hoffe es passt so.

                                        jpgorganizerJ 1 Reply Last reply
                                        0
                                        • bilberryB Offline
                                          bilberryB Offline
                                          bilberry
                                          wrote on last edited by
                                          #111

                                          Ich hoffe nicht, dass ich die Antwort auf folgende Frage irgendwo schon überlesen habe:
                                          Wenn ich mehrere Cards auf einer Seite darstelle (z.B. alle mit mdui-cols-4-toc-5) sind die auf dem Monitor schön nebeneinander und auf dem Smartphone wunderbar untereinander.
                                          Aber, wenn ich die die letzte/unterste Card zusammenklappe (oder gar mit mdui-onload schon zusammengeklappt öffne), verschwindet Card die so weit hinter der tbar, dass man sie nicht mehr expandieren kann.

                                          Hab's es soeben noch mal in der DEMO probiert, damit ihr nachvollziehen könnt, was ich meine. Für mich jetzt überraschend ist dort das Verhalten offenbar nicht so. Ein Seitenvergleich hat auf Anhieb keine Unterschiede gebracht. Hat jemand eine Idee, woran das bei mir liegen kann?

                                          P 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

                                          308

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe