Skip to content
  • Home
  • 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
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Top App Bar Widget

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    16
    1
    244

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.5k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.3k

Material Design Widgets: Top App Bar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
412 Posts 74 Posters 95.9k Views 79 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.
  • GlasfaserG Glasfaser

    @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

    Der Wert sticky und auto kommen nicht in CSS Allgemein rein .

          "style": {
    
            "left": "0px",
    
            "top": "0px",
    
            "width": "967px",
    
            "height": "48px",
    
            "cursor": "auto",
    
            "opacity": "",
    
            "position": "sticky",
    

    EDIT :

    und ein html Widget ist in der mitte vom View Index ohne Inhalt plaziert .
    Das heißt ,es befinden sich ein drittes Widget in dem Start View ohne nutzen !

        "e00003": {
    
          "tpl": "tplHtml",
    
          "data": {
    
    NegaleinN Offline
    NegaleinN Offline
    Negalein
    Global Moderator
    wrote on last edited by
    #270

    @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

    Der Wert sticky und auto kommen nicht in CSS Allgemein rein

    Stimmt, soweit hab ich garnicht geschaur! :)

    ° Node.js & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
    ° Node.js Fixer ---> iob nodejs-update
    ° Fixer ---> iob fix

    Horst BöttcherH 1 Reply Last reply
    0
    • C Chilihead

      @oli darf ich fragen wie du die Warnungsbuttons "beleuchtet" hast? Danke

      O Online
      O Online
      Oli
      wrote on last edited by
      #271

      @chilihead
      Welche Warnbutton meinst du?

      Gruß
      Oliver

      1 Reply Last reply
      0
      • NegaleinN Negalein

        @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

        Der Wert sticky und auto kommen nicht in CSS Allgemein rein

        Stimmt, soweit hab ich garnicht geschaur! :)

        Horst BöttcherH Do not disturb
        Horst BöttcherH Do not disturb
        Horst Böttcher
        wrote on last edited by
        #272

        @negalein @Glasfaser

        Ok danke euch

        Der Wert sticky und auto kommen nicht in CSS Allgemein rein
        

        Genau da war der Fehler jetzt geht es
        und das lehre Feld hab ich auch entfernt das war noch ein Überbleibsel vom alten View

        ioBroker auf Proxmox (Debian) auf LENOVO PC Thinkcentre als Produktivsystem

        1 Reply Last reply
        0
        • ScroungerS Scrounger

          @ckmartens
          Versuch davor Mal noch das Widget komplett neu zu erstellen

          CKMartensC Offline
          CKMartensC Offline
          CKMartens
          wrote on last edited by CKMartens
          #273

          @scrounger sagte in Material Design Widgets: Top App Bar Widget:

          @ckmartens
          Versuch davor Mal noch das Widget komplett neu zu erstellen

          Guten Morgen,
          ich bin leider erst gestern dazu gekommen mir alles anzusehen. Ich habe das Widget gelöscht und nochmal neu angelegt. Diesmal gingen "nur" die letzten drei Einträge nicht.
          Erst als ich im View in WIdget 8 alle Leerzeilen mit Dummyeinträge gefüllt habe, die View Instanz und den Browser neu gestartet hatte ging es.
          In der Browser Entwicklerkonsole wird dieser Hinweis angezeigt:

          DevTools failed to load SourceMap: Could not load content for http://iob1.martensnetz.de:8082/lib/js/socket.io.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
          

          Danke für eure Hilfe auch an @Glasfaser

          GlasfaserG 1 Reply Last reply
          0
          • CKMartensC CKMartens

            @scrounger sagte in Material Design Widgets: Top App Bar Widget:

            @ckmartens
            Versuch davor Mal noch das Widget komplett neu zu erstellen

            Guten Morgen,
            ich bin leider erst gestern dazu gekommen mir alles anzusehen. Ich habe das Widget gelöscht und nochmal neu angelegt. Diesmal gingen "nur" die letzten drei Einträge nicht.
            Erst als ich im View in WIdget 8 alle Leerzeilen mit Dummyeinträge gefüllt habe, die View Instanz und den Browser neu gestartet hatte ging es.
            In der Browser Entwicklerkonsole wird dieser Hinweis angezeigt:

            DevTools failed to load SourceMap: Could not load content for http://iob1.martensnetz.de:8082/lib/js/socket.io.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
            

            Danke für eure Hilfe auch an @Glasfaser

            GlasfaserG Online
            GlasfaserG Online
            Glasfaser
            wrote on last edited by
            #274

            @ckmartens

            Dies ist kein Fehler vom Widget ,

            lese hier :

            https://forum.iobroker.net/topic/34645/vis-reconnect-immer-öfter-immer-länger/15

            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

            CKMartensC 1 Reply Last reply
            1
            • GlasfaserG Glasfaser

              @ckmartens

              Dies ist kein Fehler vom Widget ,

              lese hier :

              https://forum.iobroker.net/topic/34645/vis-reconnect-immer-öfter-immer-länger/15

              CKMartensC Offline
              CKMartensC Offline
              CKMartens
              wrote on last edited by
              #275

              @glasfaser Danke für die Hilfe und Info

              B 1 Reply Last reply
              0
              • CKMartensC CKMartens

                @glasfaser Danke für die Hilfe und Info

                B Online
                B Online
                babl
                wrote on last edited by babl
                #276

                @ckmartens habe ein problem nach dem update auf den js controller schaltet die top app bar die links zu den anderen views nicht mehr, habe ich da was zerschossen?

                Alles Gut habe die Objekt ID gelöscht, geht wieder.

                Trotzdem bekomme ich im log einen Fehler web.0 2021-02-19 18:53:08.221 warn (14345) State "nothing_selected" has no existing object, this might lead to an error in future versions

                und da ich in der app bar "Nothing-selected" drin stehen habe denke ich mal daß es dies ist, denn als ich das gelöscht habe dann war die warnmeldung weg aber die navigation ging auch nicht mehr:disappointed: , wer kann mir denn da weiterhelfen?

                ScroungerS 1 Reply Last reply
                0
                • B babl

                  @ckmartens habe ein problem nach dem update auf den js controller schaltet die top app bar die links zu den anderen views nicht mehr, habe ich da was zerschossen?

                  Alles Gut habe die Objekt ID gelöscht, geht wieder.

                  Trotzdem bekomme ich im log einen Fehler web.0 2021-02-19 18:53:08.221 warn (14345) State "nothing_selected" has no existing object, this might lead to an error in future versions

                  und da ich in der app bar "Nothing-selected" drin stehen habe denke ich mal daß es dies ist, denn als ich das gelöscht habe dann war die warnmeldung weg aber die navigation ging auch nicht mehr:disappointed: , wer kann mir denn da weiterhelfen?

                  ScroungerS Offline
                  ScroungerS Offline
                  Scrounger
                  Developer
                  wrote on last edited by
                  #277

                  @babl
                  siehe https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget/26 und folgende

                  B 1 Reply Last reply
                  1
                  • ScroungerS Scrounger

                    @babl
                    siehe https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget/26 und folgende

                    B Online
                    B Online
                    babl
                    wrote on last edited by
                    #278

                    @scrounger danke das wars, aber warum daß man sehen kann wie oft die aufgerufen wurde, irgendwie habe ich das beim einrichten nicht gecheckt hab mir immer schon gedacht was da wohl reinkommt?

                    Danke Warnmeldungen sind weg.

                    1 Reply Last reply
                    0
                    • I Offline
                      I Offline
                      IOBaer
                      wrote on last edited by
                      #279

                      Hallo zusammen,

                      sehe ich das richtig, dass das Widget bei mehreren Usern, die gleichzeitig die VIS nutzen sollen, nicht sinnvoll ist, weil die Anzeige - wegen des Datenpunktes - bei allen Usern immer identisch wäre?

                      1 Reply Last reply
                      0
                      • B Offline
                        B Offline
                        BamBam89
                        wrote on last edited by Scrounger
                        #280

                        Erstmal Herzlichen Dank an @Scrounger für die tolle Arbeit!!

                        Ich hätte aber eine Frage. Ich nutze derzeit die Top App Bar.
                        Dort gibt es vier Elemente Rum Vodka... etc

                        Ich habe allerdings zwei Views Rum vielleich auch mal 3 oder 4. Der Einfachheit halber, nenn wir diese mal Rum_Start; Rum_1; Rum_2
                        Nun kann ich über die Top App Bar in Rum_Start springen. Soweit funktioniert alles. Von Rum_Start möchte ich dann jedoch über Navigation Button die Seiten wechseln können.
                        Ist das möglich oder gibt das das Widget nicht her?

                        Gruß Christian

                        Edit: Verschoben da Frage Widget Einstellung betrifft

                        GlasfaserG 1 Reply Last reply
                        0
                        • B BamBam89

                          Erstmal Herzlichen Dank an @Scrounger für die tolle Arbeit!!

                          Ich hätte aber eine Frage. Ich nutze derzeit die Top App Bar.
                          Dort gibt es vier Elemente Rum Vodka... etc

                          Ich habe allerdings zwei Views Rum vielleich auch mal 3 oder 4. Der Einfachheit halber, nenn wir diese mal Rum_Start; Rum_1; Rum_2
                          Nun kann ich über die Top App Bar in Rum_Start springen. Soweit funktioniert alles. Von Rum_Start möchte ich dann jedoch über Navigation Button die Seiten wechseln können.
                          Ist das möglich oder gibt das das Widget nicht her?

                          Gruß Christian

                          Edit: Verschoben da Frage Widget Einstellung betrifft

                          GlasfaserG Online
                          GlasfaserG Online
                          Glasfaser
                          wrote on last edited by
                          #281

                          @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                          Button die Seiten wechseln können.

                          in etwa so :
                          https://forum.iobroker.net/topic/41839/vis-mit-top-app-und-button-steuern/6

                          Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                          B 1 Reply Last reply
                          0
                          • GlasfaserG Glasfaser

                            @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                            Button die Seiten wechseln können.

                            in etwa so :
                            https://forum.iobroker.net/topic/41839/vis-mit-top-app-und-button-steuern/6

                            B Offline
                            B Offline
                            BamBam89
                            wrote on last edited by
                            #282

                            @glasfaser

                            Also wenn ich das richtig verstehe, dann ist das nicht das was ich suche.
                            In deinem Beispielt geht es ja scheinbar darum das Keller, Erdgeschoss, etc immer angezeigt werden soll. Das ist bei mir nicht der Fall. Ich versuche das mal bitte Bilder zu hinterfüllen.

                            Das sind meine Views Zumindest die ersten. Ich bin noch in der kreativen Phase :-) :

                            87cf4b29-d27c-46fa-88a6-0fe168bd2ba9-image.png

                            Auf 0_1_Index liegt das Widget Top App Bar und das View in Widget 8.
                            Bei sind über den Datenpunkt .... Zahl für Navigation.... verbunden

                            e8ea294d-8095-40aa-9cc2-93375b3ad8c6-image.png

                            Über das Menü Top App Bar kann ich nun einer meiner fünf Views besuchen

                            06c881fd-b6fd-4a92-b34a-f4149c8514c6-image.png

                            Wenn ich also auf Rum klicke, komme ich in das View 1_1_Rum

                            9fc6e3ee-6631-4008-8059-54880586d806-image.png

                            Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas), unten Links möchte ich dann gerne 1_2_Rum angezeigt bekommen.
                            Hier wären dann ebenfalls ein Button um wieder zurück zu kommen. Bzw. sollte es mal eine Seite 1_3_Rum geben müsste es auf 1_2_Rum natürlich zwei Button geben um entweder auf 1_1_Rum oder auf 1-3-Rum zu kommen...

                            Gruß

                            GlasfaserG 1 Reply Last reply
                            0
                            • B BamBam89

                              @glasfaser

                              Also wenn ich das richtig verstehe, dann ist das nicht das was ich suche.
                              In deinem Beispielt geht es ja scheinbar darum das Keller, Erdgeschoss, etc immer angezeigt werden soll. Das ist bei mir nicht der Fall. Ich versuche das mal bitte Bilder zu hinterfüllen.

                              Das sind meine Views Zumindest die ersten. Ich bin noch in der kreativen Phase :-) :

                              87cf4b29-d27c-46fa-88a6-0fe168bd2ba9-image.png

                              Auf 0_1_Index liegt das Widget Top App Bar und das View in Widget 8.
                              Bei sind über den Datenpunkt .... Zahl für Navigation.... verbunden

                              e8ea294d-8095-40aa-9cc2-93375b3ad8c6-image.png

                              Über das Menü Top App Bar kann ich nun einer meiner fünf Views besuchen

                              06c881fd-b6fd-4a92-b34a-f4149c8514c6-image.png

                              Wenn ich also auf Rum klicke, komme ich in das View 1_1_Rum

                              9fc6e3ee-6631-4008-8059-54880586d806-image.png

                              Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas), unten Links möchte ich dann gerne 1_2_Rum angezeigt bekommen.
                              Hier wären dann ebenfalls ein Button um wieder zurück zu kommen. Bzw. sollte es mal eine Seite 1_3_Rum geben müsste es auf 1_2_Rum natürlich zwei Button geben um entweder auf 1_1_Rum oder auf 1-3-Rum zu kommen...

                              Gruß

                              GlasfaserG Online
                              GlasfaserG Online
                              Glasfaser
                              wrote on last edited by Glasfaser
                              #283

                              @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                              Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas),

                              Ich habe dich schon verstanden .
                              Du kannst doch die Widget´s auf deine View´s einzeln platzieren ( nicht die Index View) und dort mit Blättern .
                              Also linker Button zu 1 ,rechter Button zu 2 . ( Er schaltet dann die View in Widget 8 um )

                              1.JPG
                              .

                              2.JPG

                              . oder meinst du beim Aufgehen der TopAppBar Liste ,das dort ein vor / zurück Button rein soll !?

                              Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                              B 1 Reply Last reply
                              0
                              • GlasfaserG Glasfaser

                                @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                                Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas),

                                Ich habe dich schon verstanden .
                                Du kannst doch die Widget´s auf deine View´s einzeln platzieren ( nicht die Index View) und dort mit Blättern .
                                Also linker Button zu 1 ,rechter Button zu 2 . ( Er schaltet dann die View in Widget 8 um )

                                1.JPG
                                .

                                2.JPG

                                . oder meinst du beim Aufgehen der TopAppBar Liste ,das dort ein vor / zurück Button rein soll !?

                                B Offline
                                B Offline
                                BamBam89
                                wrote on last edited by BamBam89
                                #284

                                @glasfaser

                                Ne das geht eben nicht.
                                Also den Button den man dort nun sieht, ist im View 1_1_Rum und verweist eigentlich auf 1_2_Rum.
                                Wenn ich diesen betätige passiert.

                                Halt Stop kommt gleich ein Uodate...

                                GlasfaserG 1 Reply Last reply
                                0
                                • B BamBam89

                                  @glasfaser

                                  Ne das geht eben nicht.
                                  Also den Button den man dort nun sieht, ist im View 1_1_Rum und verweist eigentlich auf 1_2_Rum.
                                  Wenn ich diesen betätige passiert.

                                  Halt Stop kommt gleich ein Uodate...

                                  GlasfaserG Online
                                  GlasfaserG Online
                                  Glasfaser
                                  wrote on last edited by Glasfaser
                                  #285

                                  @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                                  Wenn ich diesen betätige passoert aber nix

                                  Kann ich mir nicht vorstellen , habe es so mit meinen Cam´s , ich kann hin und her schalten .

                                  Schaltet der Button von dir den Datenpunkt "Zahl für Navigation" von dir , auch mit den Werte .. 0 bis .. je nach View .

                                  Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                                  B 1 Reply Last reply
                                  0
                                  • GlasfaserG Glasfaser

                                    @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                                    Wenn ich diesen betätige passoert aber nix

                                    Kann ich mir nicht vorstellen , habe es so mit meinen Cam´s , ich kann hin und her schalten .

                                    Schaltet der Button von dir den Datenpunkt "Zahl für Navigation" von dir , auch mit den Werte .. 0 bis .. je nach View .

                                    B Offline
                                    B Offline
                                    BamBam89
                                    wrote on last edited by
                                    #286

                                    @glasfaser

                                    Ja das macht er. Ich habe das eben noch einmal versucht. Das geht am PC!
                                    Aber nicht auf dem Tablet.....

                                    GlasfaserG 1 Reply Last reply
                                    0
                                    • B BamBam89

                                      @glasfaser

                                      Ja das macht er. Ich habe das eben noch einmal versucht. Das geht am PC!
                                      Aber nicht auf dem Tablet.....

                                      GlasfaserG Online
                                      GlasfaserG Online
                                      Glasfaser
                                      wrote on last edited by Glasfaser
                                      #287

                                      @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                                      Das geht am PC!

                                      Aber nicht auf dem Tablet.....

                                      und da liegt das Problem ... !

                                      Nutze mal ein anderes Widget ... nicht das Materialdesign ... was ist dann !?

                                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                                      B 1 Reply Last reply
                                      0
                                      • GlasfaserG Glasfaser

                                        @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                                        Das geht am PC!

                                        Aber nicht auf dem Tablet.....

                                        und da liegt das Problem ... !

                                        Nutze mal ein anderes Widget ... nicht das Materialdesign ... was ist dann !?

                                        B Offline
                                        B Offline
                                        BamBam89
                                        wrote on last edited by BamBam89
                                        #288

                                        @glasfaser said in Material Design Widgets: Top App Bar Widget:

                                        @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                                        Das geht am PC!

                                        Aber nicht auf dem Tablet.....

                                        und da liegt das Problem ... !

                                        Nutze mal ein anderes Widget ... nicht das Materialdesign ... was ist dann !?

                                        Nicht zu machen. Keines der im Screenshot gezeigten funktioniert mit dem Tablet über die App
                                        Auf dem Rechner im Browser ist alles ok...

                                        759bdd65-bc12-4c3a-b3bf-546ae4bddfe9-image.png

                                        ScroungerS 1 Reply Last reply
                                        0
                                        • ScroungerS Scrounger

                                          Top App Bar Widget

                                          topappbar_modal.gif

                                          Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

                                          Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

                                          • Dokumentation
                                          • Online Beispiel

                                          Themen zu anderen Widgets findest du hier!

                                          G Offline
                                          G Offline
                                          gerald123
                                          wrote on last edited by
                                          #289

                                          @scrounger Hallo scrounger,
                                          Ich habe in meinem VIS Projekt deine Widget in Verwendung und sie funktionieren soweit sehr gut, danke schon mal für deine tolle Arbeit.

                                          Leider habe ich ein kleines Problem wenn ich auf meine VIS über die ioBroker Cloud zugreife, da fehlen alle MD Widget in meinem Projekt.
                                          Greife ich von Zuhause zu oder über den VPN dann sind alle verfügbar.
                                          Wo könnte da bei mir der Fehler liegen?

                                          Danke
                                          Gerald

                                          Synology 918+ 4GB; ioBroker auf RPI4; Zigbee; Sonoff

                                          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

                                          581

                                          Online

                                          32.7k

                                          Users

                                          82.5k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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