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.
    • Uhula
      Uhula @klausiob last edited by

      @klausiob sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

      Oder wie kann man schon beim Design verhindern, dass der Content breiter wird als die kleinste Breite (min-width)(hier col-4).

      Jede col ist 80 Pixel breit, wenn du verhindern möchtest, dass dein Content über die 4 cols hinaus geht, musst du beim Design darauf achten nicht mehr als 320px zu nutzen -evtl. noch abzüglich von 2x16px Rand - je nach genutzten Card-Aussehen. Also max. 288px nutzen (mache ich auch so, damit es auf älteren Smartphones noch passt). Wobei die meisten heute mindestens eine 360er Breite haben und ich dann mdui-cols-4-toc-5 einstelle, damit zumindest optisch die volle Breite genutzt wird.

      Wenn man im Design das grid unter Tools einstellt, kann man es recht gut kontrollieren, da das MDCSS dann ein 80er Raster anzeigt.
      7749bb88-9d74-47ea-9444-92ad7a7c456c-image.png

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

        @Saschag sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

        kann mir jemand helfen wie ich beim mdui-input einen transparenten Hintergrund hinbekommen

        Der ist eigentlich immer vorhanden - es sei denn, du hast einmal dem View selbst ein Thema zugeordnet, dann ist diese Einstellung stärker - und ich weiß auch nicht, wie du das rückgängig machen kannst ohne einen neuen View anzulegen und deine Widgets dort alle hinein zu kopieren.

        de75153a-fcd4-4f6b-990a-eb512948ca14-image.png

        Alternativ kannst du in der CSS Datei dir die Definition für mdui-input suchen und bei der background Angabe noch ein !important dahinter setzen. Ich würde aber eine saubere View nehmen, da die View Thema-Wahl evtl. noch andere Auswirkungen haben kann.

        .mdui-input input:not([type="button"]) {
        ...
          background: rgba(0,0,0,.03) !important;
        ...
        }
        
        S 1 Reply Last reply Reply Quote 0
        • Bostil
          Bostil last edited by

          Gerne würde ich ein Widget (von Scrounger) von rechts nach links "sanft" einblendend animieren lassen. War mit meiner Suche (auch hier) bisher erfolglos, hat jemand dennoch eine Idee, ob dies mit CSS klappt? Danke! 🙂

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

            @Bostil sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

            hat jemand dennoch eine Idee, ob dies mit CSS klappt?

            Grundsätzlich kann man CSS-Properties einer CSS-Klasse animieren, auch left/right/width/height Werte. Was dann wohl dem entspricht, was du erreichen möchtest. Da ich aber die CSS-Klassen der MD-Widgets nicht kenne, kann ich dir leider nicht konkreter antworten. Wenn du dich diesbezüglich in die CSS-Materie einlesen möchtest, such mal nach css animation und css keyframes.

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

              @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

              @Saschag sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

              kann mir jemand helfen wie ich beim mdui-input einen transparenten Hintergrund hinbekommen

              Der ist eigentlich immer vorhanden - es sei denn, du hast einmal dem View selbst ein Thema zugeordnet, dann ist diese Einstellung stärker - und ich weiß auch nicht, wie du das rückgängig machen kannst ohne einen neuen View anzulegen und deine Widgets dort alle hinein zu kopieren.

              de75153a-fcd4-4f6b-990a-eb512948ca14-image.png

              Alternativ kannst du in der CSS Datei dir die Definition für mdui-input suchen und bei der background Angabe noch ein !important dahinter setzen. Ich würde aber eine saubere View nehmen, da die View Thema-Wahl evtl. noch andere Auswirkungen haben kann.

              .mdui-input input:not([type="button"]) {
              ...
                background: rgba(0,0,0,.03) !important;
              ...
              }
              

              @Uhula
              Bin endlich dazu gekommen 😏
              Dank dir! Ein neuer View hat geholfen 👍

              1 Reply Last reply Reply Quote 0
              • D
                darkiop Most Active @Dominik F. last edited by darkiop

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

                @darkiop

                ja, mit mdui-expand mdui-onload

                @Uhula Aktuell werden nur die cards zusammengeklappt welche auf der View liegen die beim Laden aktiv war. Besteht die Möglichkeit, grundsätzlich alle Cards zusammenzuklappen?

                Ergänzung: Bei mir funktioniert das nicht wie von dir gedacht, da ich die Seiten in einem View8 Widget lade, d.h. onload() wird da nur einmal beim erstmaligen laden der Seite aufgerufen.

                Hat trotzdem jemand eine Idee wie ich den Cards mitgeben könnte?

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

                  @darkiop sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                  Hat trotzdem jemand eine Idee wie ich den Cards mitgeben könnte?

                  Warte mal auf die Version 2.5.1, da überwache ich den view-Wechsel der View8 Widgets und führe die mdui-onload dann für die nachgeladenen Cards durch. Vielleicht geht es dann auch bei dir.

                  D 1 Reply Last reply Reply Quote 1
                  • D
                    darkiop Most Active @Uhula last edited by

                    @Uhula Perfekt, vielen Dank @Uhula! Ist aktuell nur Kosmetik, aber bei der Verwendung aufm Smartphone durchaus nützlich!

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

                      Moin, bei mir funzt die Lbar nicht wie sie soll. Ist nicht anklickbar. Habe alle anderen Adapter mit Material deinstalliert auch mehrfach neu gestartet und cache gelöscht und alle browser probiert aber nix zu machen. hat noch einer eine idee?

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

                        @kmxak sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                        hat noch einer eine idee?

                        Was bedeutet "lbar funzt nicht"? Du meinst sicher die lnav-View?
                        In welchem Projekt? MD-Demo?
                        Wird sie nicht dargestellt? Öffnet sie sich nicht beim Klick auf das Burger-Menü?
                        Wenn es nicht das MD_Demo Projekt ist, hast du den Script-Teil in dein Projekt übernommen?

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

                          MD_Demo von GitHub habe CSS und JS im Projekt eingefügt und auch die CSS geändert wegen anderem Namen.
                          Die Lnav öffnet sich ist aber nicht anklickbar auch die Untermenüs lassen sich nicht aufklappen stattdessen schließt sich die Lnav einfach wieder.

                          So ich habe eine Lösung.
                          Ich hatte vor einiger Zeit mal die anderen Material Adapter getestet diese aber wieder deinstalliert und gelöscht aber scheinbar hat der ioBroker diese eben nicht gelöscht. Nachdem ich in ioBroker Ordnern zumgestöbert habe sind mit einige Ordner von den Adaptern aufgefallen und habe diese manuell gelöscht. Danach ein restart und nun geht es alles so wie es soll.

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

                            @kmxak sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                            Danach ein restart und nun geht es alles so wie es soll.

                            Super - darauf wäre ich so nicht gekommen. Viel Spaß und Erfolg!

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

                              @Uhula probiere gerade mdui-show480 und mdui-hide480 aus. Leider funktioniert es nicht so wie ich gedacht habe.
                              Bei mdui-show480 sollte doch die Abkürzung angezeigt werden und bei mdui-hide480 die "lange Version"!?

                              Auf dem Smartphone wird es richtig angezeigt (WZ, Wohnzimmer)

                              Bildschirmfoto 2020-06-07 um 01.22.55.png

                              Auf dem PC verschwindet das Nav-Icon komplett

                              Bildschirmfoto 2020-06-07 um 01.25.31.png

                              Im Editor ist es zwar noch vorhanden aber nicht mehr sichtbar.

                              Bildschirmfoto 2020-06-07 um 01.24.19.png

                              MD CSS Version 2.5

                              Hab ich es falsch verwendet? Hast Du dazu einen Tipp? 😬

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

                                @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                Hast Du dazu einen Tipp?

                                Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

                                  @Uhula danke. Das erklärt das „Problem“ und ein nicht gefragtes. 😂

                                  Geht das bei einem Projekt, dass am Smartphone nur über das Burgermenü die lnav geöffnet wird und am Tablet immer offen ist? 🤔

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

                                    @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                    Geht das bei einem Projekt, dass am Smartphone nur über das Burgermenü die lnav geöffnet wird und am Tablet immer offen ist?

                                    Logo. Dafür gibt es in der Konfiguration
                                    0feaa9bc-f8c7-42bc-b77c-4c3d775c088b-image.png
                                    wo man die Anzahl der Pixel angibt, ab der das automatische Öffnen funktionieren soll.

                                    Dominik F. D 2 Replies Last reply Reply Quote 0
                                    • Dominik F.
                                      Dominik F. @Uhula last edited by

                                      @Uhula

                                      Gibt es eine Möglichkeit, dass die tnav sich mit nach rechts verschiebt? Die tnav verschwindet wenn man die lnav fixiert

                                      Unbenannt.PNG

                                      Unbenannt1.PNG

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

                                        @Uhula danke Dir. 👍 das MD CSS ist so riesig das man viele Sachen einfach wieder vergisst. Das Fenster hab ich schon mal gesehen. 😂

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

                                          @Dominik-F sollte das nicht genau das gleiche sein wie bei mir?
                                          @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                          Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

                                          Dominik F. 1 Reply Last reply Reply Quote 1
                                          • D
                                            der-eine @Uhula last edited by

                                            @Uhula sorry aber es geht immer noch nicht. Was könnte denn noch sein?

                                            lnav fixiert muss ich ja nicht eingeben oder?

                                            Bildschirmfoto 2020-06-07 um 20.20.04.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            883
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            74
                                            717
                                            144022
                                            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