Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] MDCSS v2: Material Design CSS Version 2

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    [Projekt] MDCSS v2: Material Design CSS Version 2

    This topic has been deleted. Only users with topic management privileges can see it.
    • jpgorganizer
      jpgorganizer @Uhula last edited by

      @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

      mrFenyx 1 Reply Last reply Reply Quote 0
      • mrFenyx
        mrFenyx @jpgorganizer last edited by

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

        jpgorganizer 1 Reply Last reply Reply Quote 0
        • bilberry
          bilberry last edited by

          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 Reply Quote 0
          • P
            Pittini Developer @bilberry last edited by

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

            Hat jemand eine Idee, woran das bei mir liegen kann?

            Ich würde vermuten dass Dein content Bereich zu groß ist. Wenn Du mit ner tnav arbeitest muss der content calc(100% - 3 * 40px) sein. Hast Du nur 2mal 40 abgezogen geht der content zu weit nach unten. Wär zumindest jetzt mein Verdacht.

            bilberry 1 Reply Last reply Reply Quote 0
            • bilberry
              bilberry @Pittini last edited by

              @Pittini Danke für den Tipp. Es könnte tatsächlich sein, dass ich ursprünglich einer Vorlage ohne bnav begonnen habe. Die Stelle schaue ich mir heute Abend noch mal genauer an .

              1 Reply Last reply Reply Quote 0
              • G
                GiuseppeS last edited by GiuseppeS

                @Uhula
                Du verwendest in Deinem Script einige Methoden wie z.B. ele.closest, ele.attr, removeAttr, usw.
                Sind das ioBroker-eigene Methoden oder gibt es dazu einen offiziellen Begriff wonach man googlen könnte?
                Habe nur folgendes gefunden, aber da stehen deine Methoden nicht drin:
                HTML DOM Element Object

                Evtl hast du ja eine Quelle für mich 🙂
                Danke

                Uhula 1 Reply Last reply Reply Quote 0
                • mrFenyx
                  mrFenyx last edited by mrFenyx

                  Weiß jemand was man tun muss so dass die Material Icons korrekt in der ioBroker Android App angezeigt werden? Ist das eigentlich möglich? Jetzt wird nur das "Text" angezeigt also werden die Font Dateien nicht gefunden.

                  UPDATE: man muss einfach nur die komplette Adresse für den Font URL angeben, dann alles in der App reload / resync und es geht!

                  1 Reply Last reply Reply Quote 0
                  • Uhula
                    Uhula @GiuseppeS last edited by

                    @GiuseppeS Früher, im HTML-Mittelalter, gab es kaum elegante Methoden um sich browserseitig durch die DOM Elemente zu bewegen. Eine Bibliothek, jquery, bot hier viel bessere Möglichkeiten. Mittlerweile könnte man auf jquery verzichten, aber ioBroker nutzt es noch (wie >80% der WebSites). Info/API/Dok: jquery

                    G 1 Reply Last reply Reply Quote 1
                    • G
                      GiuseppeS @Uhula last edited by

                      @Uhula
                      Hey Klasse, danke für den Hinweis und den Link. So kann ich mich dran versuchen ein paar eigene Ideen umzusetzen 🙂
                      Wo ist eigentlich dein "Buy me a beer" - Link?

                      1 Reply Last reply Reply Quote 0
                      • D
                        der-eine last edited by

                        Guten Morgen,

                        bin gerade dabei mir eine View für Pings zu erstellen. Wie könnte man das am schönsten im Material Design lösen?
                        Habe mir mal die Tabellen angeschaut und die Bindings zu den Datenpunkten eingefügt. Somit müsste man nur
                        im Ping Adapter das Gerät ändern und es wird automatisch in die VIS übernommen.
                        Hab mich ein wenig mit Colspan gespielt und versucht die Überschriften der Spalten mittig über die Einträge zu bekommen
                        aber leider nicht so hin bekommen wie ich das gerne hätte. Des weiteren wäre es noch interessant, den Status entweder mit
                        einem Kreis in rot oder grün anzuzeigen oder zumindest true und false jeweils die Farbe ändern. Hat da jemand nen Tipp wie
                        ich das bewerkstelligen könnte? Das wär top! 😀
                        Oder hat jemand eine bessere Idee? 😬

                        Bildschirmfoto 2020-03-04 um 02.34.44.png
                        Bildschirmfoto 2020-03-04 um 02.36.31.png

                        Uhula 1 Reply Last reply Reply Quote 0
                        • Uhula
                          Uhula @der-eine last edited by Uhula

                          @der-eine Mmmh, damit ist deine Tabelle recht statisch. Ich würde einen anderen Weg wählen (der aber Javascript Kenntnisse voraussetzt): Serverseitig ein Script schreiben, welches via on-Event die "ping.0.*" Änderungen überwacht und dann aus allen "ping.0.*" eine HTML-Tabelle / List erzeugt und diese in einen State unter "0_userdata.0" speichert. Diesen state kannst du dann einfach im vis über ein basic-string (unescaped) Widget anzeigen; incl. eingefärbter Symbole.
                          Ich bin gerade dabei solche Mini-Scripte für mich zu schreiben, z.B. um das ioBroker-Log im MDCSS anzeigen zu können (ich mag die List-Darstellung, setze aber beides um, List und Table). Ping kommt auch noch dran. Ich werde die Scripte dann hier im Forum incl. Beispiel-MDCSS-View teilen.


                          9a38b941-13d8-4b39-82ce-ff746f7d9f83-image.png


                          630cce2d-f51a-49cc-81fa-1850579474e9-image.png

                          D Xsev blauholsten 4 Replies Last reply Reply Quote 0
                          • jpgorganizer
                            jpgorganizer @mrFenyx last edited by

                            @mrFenyx said in [Projekt] Material Design CSS v2:

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

                            danke, das erklärt, warum ich es nicht hinbekommen habe. Die CSS mdui-navitem überschreibt mein eingebenes alignment. Ich bin nur nicht imstande das zu ändern.

                            Grüße
                            jpgorganize

                            1 Reply Last reply Reply Quote 0
                            • D
                              der-eine @Uhula last edited by der-eine

                              @Uhula diese Beispiele sehen sehr gut aus! 👍
                              Leider kenne ich mich mit JS garnicht aus. Das wäre super wenn Du
                              Deine Skripte hier teilen würdest!!
                              Gibts es schon fertige Skripte von Dir hier irgendwo im Forum?

                              Danke für Deine Arbeit. 🙂

                              1 Reply Last reply Reply Quote 1
                              • Xsev
                                Xsev @Uhula last edited by Xsev

                                @Uhula Vielleicht kannst du mir da helfen? Gibt es vielleicht die Möglichkeit, eine Klasse (bsp. mdui-color-glow) einem Status zuzuordnen bei einfachen Bulb on/off Widgets? Damit sich die Farbe dem aktuellen Schaltzustand anpasst. Wie in deienm Beispiel mit der Werteliste für Stati.

                                Aktuell nutze ich 2 Widgets übereinander über sichtbarkeit geschalten, das ist aber bei vielen Buttons relativ unpraktisch und mir kommt es auch so vor als zieht es mir ziemlich die Performance runter, da ich quasi alles doppelt habe.

                                P 1 Reply Last reply Reply Quote 0
                                • P
                                  Pittini Developer @Xsev last edited by Pittini

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

                                  Gibt es vielleicht die Möglichkeit, eine Klasse (bsp. mdui-color-glow) einem Status zuzuordnen bei einfachen Bulb on/off Widgets?

                                  Ja, das geht. Setzt mal bei Generell/CSS Klasse sowas rein:

                                  {val:javascript.0.FensterUeberwachung.AlleFensterZu;val=="true"? "mdui-green-glow":  "mdui-red-glow"}  
                                  

                                  Da mußt Du aber noch den DP anpassen, also das javascript.0.FensterUeberwachung.AlleFensterZu abändern zu dem was auch in Object ID steht. Hübsch ist das allerdings nicht mit dem Bulb Widget (habs grad mal getestet damit ich Dir keinen Quatsch ezähl). Ich nehm dafür meist das Basic Bool Widget, da biste flexibler weil man da auch noch innerhalb des img Tags mit den mdui... Klassen arbeiten kann.

                                  Xsev 1 Reply Last reply Reply Quote 1
                                  • Xsev
                                    Xsev @Pittini last edited by

                                    @Pittini Danke das versuche ich später gleich mal, wenn ich wieder daheim bin. Ja ich nutz auch meist das Basic Bool Widget, hab ich verwechselt.
                                    Wäre genial wenn ich das alles in einem Widget unterbringen würde.

                                    P 1 Reply Last reply Reply Quote 0
                                    • P
                                      Pittini Developer @Xsev last edited by

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

                                      Wäre genial wenn ich das alles in einem Widget unterbringen würde.

                                      Dasgeht definitiv, hab ich zig mal hier verwendet. Wo man auch noch rumspielen kann, ist bei Signalbilder, da haste 3 vollkommen verschiedene Möglichkeiten zusätzlich, die sich auch mit mdui... Klassen versehen lassen.

                                      Xsev 1 Reply Last reply Reply Quote 1
                                      • Xsev
                                        Xsev @Pittini last edited by

                                        @Pittini Perfekt! Das funzt genau so wie ich es mir erhofft habe!!!! Danke nochmal!!! Das macht es deutlich überschaubarer.

                                        Jetzt muss ich aber nochmal wegen dem bool widget fragen.

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

                                        Ich nehm dafür meist das Basic Bool Widget, da biste flexibler weil man da auch noch innerhalb des img Tags mit den mdui... Klassen arbeiten kann.

                                        Meinst du damit, das man damit dem Bild innerhalb des Widgets nochmal einen anderen css Effekt zuordnen kann? Also das Widget leuchtet je nach Stati rot/grün aber das Logo kann z.b. Blau flashen?
                                        Hättest du da mal einen Beispiel Code für mich wie das ganze im HTML Tag dann aussehen müsste?

                                        P Dominik F. 2 Replies Last reply Reply Quote 0
                                        • P
                                          Pittini Developer @Xsev last edited by

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

                                          Meinst du damit, das man damit dem Bild innerhalb des Widgets nochmal einen anderen css Effekt zuordnen kann? Also das Widget leuchtet je nach Stati rot/grün aber das Logo kann z.b. Blau flashen?

                                          Ja, man kann kombinieren. Aber nicht jede Kombi macht Sinn, bzw. funktioniert. Einfach probieren, geht ja nix kaputt.

                                          Hättest du da mal einen Beispiel Code für mich wie das ganze im HTML Tag dann aussehen müsste?

                                          <img class="mdui-red-blink" height=32px src='/icons-mfd-svg/scene_making_love_clean.svg'>
                                          
                                          Xsev 1 Reply Last reply Reply Quote 1
                                          • Xsev
                                            Xsev @Pittini last edited by Xsev

                                            @Pittini Super danke!

                                            Lol, ich glaube wir haben das selbe Schlafzimmer Symbol 😆 👍 fehlt nur noch die Wägezelle im Bett für den Datenpunkt. 🙂

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            795
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            74
                                            717
                                            141728
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo