Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] Material Design CSS für ioBroker.vis

    NEWS

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    • Save The Date: ioBroker@Smart Living Forum Solingen, 14.06.

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cuuira last edited by

      Nabend

      Ich habe leider keinen Plan von diesem ganzen CSS Sachen. Deswegen brauche ich mal eine Hilfe…. ich jetzt so einige Sachen in meinem Projekt angepasst und würde gerne bei einer bestimmten Auflösung die Namen kürzen. Dazu gibt es auch in der Anleitung eine Beschreibung. Leider weiß ich damit nichts anzufangen.

      > Wenn man hier Rücksicht auf ein responsive Design nehmen möchte, kann man den Text so gestalten, dass er bei Bildschirmauflösungen von max. 480px und mehr als 480px unterschiedlich dargestellt wird. Hierzu sind die CSS Klassen mdui-show480 und mdui-hide480 zu nutzen. Bsp: EGErdgeschoß

      Gruß Cuuira

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

        @Uhula:

        font-family: Roboto, Arial !important; `

        Danke, das hat geholfen!

        1 Reply Last reply Reply Quote 0
        • C
          cuuira last edited by

          Nabend….

          Habe jetzt mal ein bißchen angepasst und eingefügt.... kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? Habe die Quelle an Hand von dem "LOCAL" angepasst, aber sobald eine neue Quelle ins Spiel kommt, ist alles verschoben.

          Gruß

          cuuira
          4970_bildschirmfoto_2018-01-14_um_19.25.18.png
          4970_bildschirmfoto_2018-01-14_um_19.26.36.png

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

            @cuuira:

            kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? `
            Da ich nur raten kann, wie du die Texte darstellst, hier der Versuch einer Antwort. Angenommen du nimmst dafür ein basic HTML oder basic String, dann setzt du für dieses Widget die folgenden Eigenschaften:

            • left: an den linken Rand des Tile, z.B. 13

            • width: auf 200 (oder so, dass es gerade noch in das Tile passt)

            • Font / Ausrichtung (text-align): center (dann werden Texte innerhalb der Breite des Widgets zentriert)

            1 Reply Last reply Reply Quote 1
            • 0
              0018 last edited by

              Hallo,

              wie kann ich am besten das "yr.0.forecast.html" in das MD mit einbinden?

              1 Reply Last reply Reply Quote 0
              • C
                Crockers last edited by

                Hallo,

                ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                Wer kann mir auf die sprünge helfen?

                Vielen Dank 🙂

                1 Reply Last reply Reply Quote 0
                • S
                  Sven2013 last edited by

                  @Crockers:

                  Hallo,

                  ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                  Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                  Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                  Wer kann mir auf die sprünge helfen?

                  Vielen Dank 🙂 `

                  Hast du dem Widget auch nochmal die Widgetnummer zugewiesen?

                  Gruß Sven

                  Gesendet von iPhone mit Tapatalk

                  1 Reply Last reply Reply Quote 0
                  • C
                    Crockers last edited by

                    @Sven2013:

                    @Crockers:

                    Hallo,

                    ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                    Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                    Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                    Wer kann mir auf die sprünge helfen?

                    Vielen Dank 🙂 `

                    Hast du dem Widget auch nochmal die Widgetnummer zugewiesen?

                    Gruß Sven

                    Gesendet von iPhone mit Tapatalk `

                    Widgetnummer? :?:
                    5056_forum.png

                    1 Reply Last reply Reply Quote 0
                    • ?
                      A Former User last edited by

                      Die Widgetnummer in deinem Screenshot ist w00012.

                      Diese Nummer musst du bei dem Feld "HTML anhängen:" eintragen.

                      Dort steht noch eine falsche Nummer (w00312).

                      1 Reply Last reply Reply Quote 0
                      • C
                        Crockers last edited by

                        @nisio:

                        Die Widgetnummer in deinem Screenshot ist w00012.

                        Diese Nummer musst du bei dem Feld "HTML anhängen:" eintragen.

                        Dort steht noch eine falsche Nummer (w00312). `

                        Kleine Ursache, große Wirkung. Perfekt. es funktioniert. Vielen Dank.

                        1 Reply Last reply Reply Quote 0
                        • C
                          cuuira last edited by

                          @Uhula:

                          @cuuira:

                          kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? `
                          Da ich nur raten kann, wie du die Texte darstellst, hier der Versuch einer Antwort. Angenommen du nimmst dafür ein basic HTML oder basic String, dann setzt du für dieses Widget die folgenden Eigenschaften:

                          • left: an den linken Rand des Tile, z.B. 13

                          • width: auf 200 (oder so, dass es gerade noch in das Tile passt)

                          • Font / Ausrichtung (text-align): center (dann werden Texte innerhalb der Breite des Widgets zentriert) `

                          Sorry für die fehlenden Angaben… aber du kannst ja zum Glück Gedanken lesen!!! 😄

                          Deine Antwort hat natürlich geholfen.... THX

                          1 Reply Last reply Reply Quote 0
                          • 0
                            0018 last edited by

                            Hallo zusammen,

                            ich habe ein Problem mit der Auflösung auf meinen Tab mit Android7.

                            Ich habe das MD Design auf 1280x800 ausgelegt.

                            Auf dem Tab wird es im Fully Kiosk Browser aber nur vergrößert dargestellt und ich kann nicht weiter rein zoomen, so das ich Scroll-Effekte habe, die ich nicht möchte. Bekomme also nur eine geringere Auflösung angezeigt.

                            Kann mir jemand sagen woran das liegt?

                            1 Reply Last reply Reply Quote 0
                            • R
                              reini last edited by

                              Hallo Leute, wie bekomm ich denn die schönen Balken hin?! (wie von Ruhr70 gezeigt)

                              Ist dies das Bar-Widget bzw. wie bekomm ich den Farbverlauf?

                              thx

                              edit

                              erledigt, habs nach einiger Zeit hinbekommen!!
                              3845_2018-01-23_12_37_21-2017-12-10_simple_md.png__png-grafik__2936___956_pixel_.png

                              1 Reply Last reply Reply Quote 0
                              • M
                                Mac last edited by

                                Hi, wie denn? Wäre nett wenn Du das beschreiben würdest, danke.

                                1 Reply Last reply Reply Quote 0
                                • R
                                  reini last edited by

                                  2 Fragen bitte, wie bekomm ich denn das Bild FullScreen/zentriert? bzw. die Navigationsleiste (EG, OG usw.) schneidet es mir im Hochformat ab? (müsste die nicht wenn responsiv dann mehrzeilig werden ?!)

                                  @Mac:

                                  Hi, wie denn? Wäre nett wenn Du das beschreiben würdest, danke. `

                                  als Widget nimmst du "Bar" , die Einstellungen bei Allgemein & Hintergrund machen lt. Screens

                                  Background: linear-gradient(to right,red,yellow,green)
                                  3845_unbenannt.png
                                  3845_unbenannt2.png
                                  3845_unbenannt3.png
                                  3845_img_3483.jpg

                                  1 Reply Last reply Reply Quote 0
                                  • T
                                    tempestas last edited by

                                    Hall uhula,

                                    eine Frage habe ich:

                                    ich kopiere mir Teile des MD (komplette Abschnitte, also z.B. alles, was unter /* INPUT */ steht ).

                                    Trotzdem sehen bei mir z.B. die jqui input Widgets nach Zuweisung der CSS Klasse ganz anders aus, als in deinen Vorlagen? Habe ich da was falsch gemacht, muss man doch einfach alles rüberkopieren?

                                    Danke vorab!

                                    Nachtrag: ok, war ne blöde Frage: alles rüberkopieren hilft natürlich. Da habe ich die Abhängigkeiten der einzelnen Abschnitte wohl noch nicht verstanden.

                                    Hach Mensch, es gibt aber auch viel zu lernen…

                                    Edit 2:

                                    ok, eine Frage habe ich nun doch. Wie bekomme ich biem jqui date time input nun die Sekunden weg? die werden immer angezeigt, reagieren nicht auf das "zeige keine Sekunden" (logisch, wird ja auch alles überschrieben).

                                    was müsste ich tun, um bei spezifischen jqui date time inputs den Unterstrich zu entfernen?

                                    DANKE!

                                    1 Reply Last reply Reply Quote 0
                                    • T
                                      tempestas last edited by

                                      Da man die Sekunden wohl nicht ausschalten kann im Widget habe ich mir jetzt so beholfen, die Schrift und die Bottom-Border unsichtbar zu machen und dann das Ganze als unsichtbares Overlay über meine Zeitanszeige zu legen, die sich dann wiederum aus den Stunden und Minuten, die man mit dem Widget einstellt, speist.

                                      Etwas von Hinten durchs Auge in die Brust, aber funktioniert!

                                      1 Reply Last reply Reply Quote 0
                                      • R
                                        reini last edited by

                                        Hallo Leute,

                                        habe ich mit dem responsiven Design auch eine Chance diverse reingesetzte Widgets im Bild richtig positioniert zu bekommen? Bild wird auf die Breite angepasst, die Widgets stehen aber dann zum Teil irgendwo herum..
                                        3845_img_3502.png

                                        1 Reply Last reply Reply Quote 0
                                        • arteck
                                          arteck Developer Most Active last edited by

                                          hier kannst du auf prozent umschalten
                                          1518_unbenannt.jpg

                                          1 Reply Last reply Reply Quote 0
                                          • R
                                            reini last edited by

                                            @arteck:

                                            hier kannst du auf prozent umschalten `

                                            was ändert das aber an einer richtigen Positionierung? Ich hab ja das Problem das ich Widgets in die Cards reinsetze welche dann je nach Auflösung nicht richtig mitwandern an die korrekten Positionen, vielleicht geht das auch gar nicht aber müsste ich es wissen denn dann probier ich nicht weiter 🙂

                                            thx

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.0k
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

                                            111
                                            650
                                            174623
                                            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