Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: IconList Widget

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widgets: IconList Widget

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

      ich weiß nicht, ob die Frage hier schon kam. Habe die 123 Post vormir nur überflogen...

      Ist es möglich, das die Buttons in der Letzten Zeile nicht auf die volle Breite es Widgets ausgedehnt werden

      587de066-7246-4800-9541-6301e1612f3e-grafik.png

      sondern linksbündig in der gleichen Breite wie die Widgets in den "vollen" Zeilen angezeigt werden?

      sigi234 1 Reply Last reply Reply Quote 0
      • sigi234
        sigi234 Forum Testing Most Active @Supermicha last edited by

        @supermicha

        3 Dummy Button einfügen?

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

          das wäre wohl eine Möglichkeit, aber maximal ein Workaround...

          ich probiere grade mit eigenem CSS, aber bin da noch nicht so wiklich weitergekommen, da ich von SCC doch nicht so wirklich Ahnung habe...

          mein Ansatz bisher

          max-width: calc(100% / var(--materialdesign-icon-list-items-per-row));
          

          das verschiebt mir aber auch alle anderen Zeilen dadrüber...

          wenn ich eine feste Breite angebe. z.B

          max-width: 150px
          

          dann klappt es, müsste ich dann nur für jede Liste anpassen... auch nicht so toll

          1 Reply Last reply Reply Quote 0
          • D
            dos1973 @BobBruni last edited by dos1973

            @bobbruni sagte in Material Design Widgets: IconList Widget:

            @Scrounger said in Material Design Widgets: IconList Widget:

            Alternativ kann man sich das mit weniger Funktion auch per Editor zusammen klicken.

            Wenn es für jedes Listenelement die Option "Bedingung für Sichtbarkeit" geben würde, könnte man es sich mit dem Editor zusammen klicken... Oder gibt es eine andere Möglichkeit?

            @Scrounger
            Hi, ist diese Funktion implementiert? ich hab zwar das gefunden
            https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/118

            aber ich stehe irgendwie auf dem Schlauch mit den Settings. Eine Doku dazu konnte ich leider nicht finden. Könntest du mal ein Screenshot der Setting machen. Ich bekomme es einfach nicht hin.

            bei mir toggle er einfach - aber verschwindet nicht.
            und wie kann ich denn die Symbolgröße verändern / größer machen

            Bildschirmfoto 2022-02-18 um 21.24.00.png

            BobBruni created this issue in Scrounger/ioBroker.vis-materialdesign

            closed [IconList Widget] - Bedingung für Sichtbarkeit #118

            D 1 Reply Last reply Reply Quote 0
            • D
              dos1973 @dos1973 last edited by

              @dos1973 sagte in Material Design Widgets: IconList Widget:

              und wie kann ich denn die Symbolgröße verändern / größer machen

              ok, da hatte ich echt Tomaten auf den Augen, hab es in den Settings gefunden.

              Aber die Liste bekomme ich nicht erstellt, dass er das Icon ausblendet...
              oder, muss ich für jedes Icon (Lampe) ein eigenes Icon List Widget erstellen und mittels der Sichtbarkeit steuern??

              Helft mir doch mal au der Klemme...Thx

              D 1 Reply Last reply Reply Quote 0
              • D
                dos1973 @dos1973 last edited by

                habs gefunden, 👓 musste erst ein Update auf die Beta machen...

                D 1 Reply Last reply Reply Quote 0
                • D
                  dos1973 @dos1973 last edited by

                  Hi zusammen,

                  ich habe nochmals eine Frage zum icon List widget. ich möchte das mit der Funktion "zeige nur eingeschaltete Lichter" nachbauen.

                  Soweit so gut, das läuft, aber ich finde kein Wert um die max. Breite festzulegen.
                  ich find es einfach nicht, falls es das gibt - wäre wirklich dankbar für einen Hinweis.

                  so schaut's aus:
                  Bildschirmfoto 2022-06-29 um 23.59.26.png

                  aber wenn ich die Lampen dann ausschalte, werden die Buttons immer Breiter
                  Bildschirmfoto 2022-06-29 um 23.59.42.png
                  Bildschirmfoto 2022-06-29 um 23.59.55.png

                  ich würde mir ein feste Breite wünschen, egal wieviele Elemente aktiv sind.

                  geht das? hat jemand eine Tipp für mich?

                  Thx

                  D 1 Reply Last reply Reply Quote 0
                  • D
                    dos1973 @dos1973 last edited by

                    @dos1973
                    niemand eine Idee

                    @Scrounger : könntest du mir helfen?

                    FoodFighter 1 Reply Last reply Reply Quote 0
                    • FoodFighter
                      FoodFighter @dos1973 last edited by FoodFighter

                      @dos1973
                      du könntest unter "CSS-Allgemein > width" die Breite der Widget-Tabelle festlegen.
                      Hast du das schon probiert?

                      B 1 Reply Last reply Reply Quote 0
                      • B
                        BamBam89 @FoodFighter last edited by

                        Hallo zusammen,

                        ich versuche mich gerade an der IconList und stoße aktuell wohl an meine Grenzen 🙂

                        Ich versuche gerade folgendes Beispiel umzusetzen:

                        Ich habe drei Lampen (Lampe_1, Lampe_2, Lampe_3)
                        Dafür soll mir die IconList Button erzeugen.

                        Diese Button sollen aber in Abhängigkeit einer Bedingung angezeigt werden. (Bedingung_1, Bedingung_2, Bedingung_3)

                        Bedeutet, nur wenn Bedingung 1 erfüllt ist, soll auch der Button 1 für Lampe 1 angezeigt werden.

                        Dazu habe noch eine JSON erstellt mit folgendem Inhalt:

                        [
                          {
                            "listType": "buttonToggle",
                            "objectId": "0_userdata.0.Spielereien.Lampe_1",
                            "visibilityOid": "0_userdata.0.Spielereien.Bedingung_1",
                            "visibilityCondition": "==",
                            "visibilityConditionValue": true,
                            "buttonToggleValueTrue": "on",
                            "buttonToggleValueFalse": "off",
                            "readOnly": false,
                            "showValueLabel": true,
                            "background": "#44739e",
                            "text": "Lampe 1",
                            "image": "lightbulb",
                            "imageColor": "#44739e"
                          },
                          {
                            "listType": "buttonToggle",
                            "objectId": "0_userdata.0.Spielereien.Lampe_2",
                            "visibilityOid": "0_userdata.0.Spielereien.Bedingung_2",
                            "visibilityCondition": "==",
                            "visibilityConditionValue": true,
                            "buttonToggleValueTrue": "on",
                            "buttonToggleValueFalse": "off",
                            "readOnly": false,
                            "showValueLabel": true,
                            "background": "#44739e",
                            "text": "Lampe 2",
                            "image": "lightbulb",
                            "imageColor": "#44739e"
                          },
                          {
                            "listType": "buttonToggle",
                            "objectId": "0_userdata.0.Spielereien.Lampe_3",
                            "visibilityOid": "0_userdata.0.Spielereien.Bedingung_3",
                            "visibilityCondition": "==",
                            "visibilityConditionValue": true,
                            "buttonToggleValueTrue": "on",
                            "buttonToggleValueFalse": "off",
                            "readOnly": false,
                            "showValueLabel": true,
                            "background": "#44739e",
                            "text": "Lampe 3",
                            "image": "lightbulb",
                            "imageColor": "#44739e"
                          }
                        ]
                        

                        In der Vis habe ich erst mal nichts anderes gemacht, als in der IconList die ObjektID der JSON List eingefügt:

                        60479888-a181-4984-a55d-0985e30ee561-image.png

                        Die Liste wird erzeugt. Soweit so gut. Aber sobald ich den Wert einer Bedingung auf false setze, nehmen wir mal als Beispiel Bedingung_1 wird der Button in der VIS nicht ausgeblendet. Aktualisiere ich aber den Editor, dann ist dort der Button für Lampe_1 nicht mehr sichtbar:

                        VIS Runtime:

                        46ed98cf-1f5e-4bb7-bab2-0e559a2ddb19-image.png

                        Vis Ediitor:

                        5a1a32e7-74d0-4a71-9e45-08c9087df419-image.png

                        Kann mir bitte jemand erklären, woran das liegt oder was ich falsch mache?

                        Vielen Dank

                        Gruß Christian

                        P 1 Reply Last reply Reply Quote 0
                        • P
                          pezi86 @BamBam89 last edited by

                          @bambam89
                          Hallo,
                          Ich habe genau das gleiche Problem.

                          Wenn ich die gleiche OID für Sichtbarkeit und ObjektID nehme wird es im Runtime ausgeblendet wie gewünscht.

                          Wenn ich unterschiedliche OIDs nehme wie in deinem Beispiel wird das Inaktive Objekt nur im Editor ausgeblendet und nicht im Runtime.

                          Gibt es hier schon eine Lösung? Es wäre schon praktisch mit einem eigenen IOD für die Sichtbarkeit und sich dann den aktuellen Wert anzeigen zu lassen.

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

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          753
                          Online

                          31.7k
                          Users

                          79.8k
                          Topics

                          1.3m
                          Posts

                          vis
                          26
                          134
                          15512
                          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