Skip to content
  • 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
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Top App Bar Widget

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.1k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.8k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.1k

Material Design Widgets: Top App Bar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
412 Posts 74 Posters 87.7k 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.
  • J Offline
    J Offline
    JB72
    wrote on last edited by JB72
    #61

    Hier mal Bilder zum "Problem"

    Wenn ich meine Vis starte ist das der Startschirm, der bleibt auch
    screen0.JPG

    Dann gehe ich in der Navigation auf eine der Ansichten hier Heizung:
    screen1.JPG

    Die sehe ich dann für 30 Sekunden und dann ist sie weg:
    screen2.JPG

    Nun reicht es nicht wieder in der Navigation wieder Heizung auszuwählen, es bleibt leer
    ich muss dann z.B. auf den Homescreen oder eine der anderen Views und dann wieder
    zurück zur Ansicht für die Heizung, erst dann sehe ich die wieder.

    ScroungerS 1 Reply Last reply
    0
    • J JB72

      Hier mal Bilder zum "Problem"

      Wenn ich meine Vis starte ist das der Startschirm, der bleibt auch
      screen0.JPG

      Dann gehe ich in der Navigation auf eine der Ansichten hier Heizung:
      screen1.JPG

      Die sehe ich dann für 30 Sekunden und dann ist sie weg:
      screen2.JPG

      Nun reicht es nicht wieder in der Navigation wieder Heizung auszuwählen, es bleibt leer
      ich muss dann z.B. auf den Homescreen oder eine der anderen Views und dann wieder
      zurück zur Ansicht für die Heizung, erst dann sehe ich die wieder.

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

      @JB72
      Haken bei dauernd beim view in Widget 8 hast du gesetzt?
      19563090-2d2b-45e0-bd39-c03fac6ac903-grafik.png

      <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

      <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

      J S 2 Replies Last reply
      0
      • ScroungerS Scrounger

        @JB72
        Haken bei dauernd beim view in Widget 8 hast du gesetzt?
        19563090-2d2b-45e0-bd39-c03fac6ac903-grafik.png

        J Offline
        J Offline
        JB72
        wrote on last edited by
        #63

        @Scrounger

        Danke. Genau das war es. Ist mir nicht aufgefallen 🤦 ... kaum macht man es richtig, dann läuft es auch.

        1 Reply Last reply
        0
        • ScroungerS Scrounger

          @JB72
          Haken bei dauernd beim view in Widget 8 hast du gesetzt?
          19563090-2d2b-45e0-bd39-c03fac6ac903-grafik.png

          S Offline
          S Offline
          saeft_2003
          Most Active
          wrote on last edited by saeft_2003
          #64

          @Scrounger

          Bei mir passiert was ganz komisches beim top app bar widget.

          Ich lade die VIS mit dem widget mit diesem link ....mainaktuell#01_Navigation (dieser ändert sich bei view wechsel nicht) und dann wird nach ein paar Minuten nur noch ein schwarzer Bildschirm angezeigt (dauernd ist aktiviert im widget 8 ) nur noch die drei Striche vom top app bar widget werden angezeigt. Ein viewwechsel ist nicht mehr möglich. Das sehr komische ist das sich der link im browser ändert auf ....mainaktuell#Erdgeschoss egal in welchen view ich vorher war.

          Diesen view gibt es aber gar nicht. Mein Erdgeschoss view heißt in diesem Projekt 02_Erdgeschoss. Wurde aber von einem anderen projekt exportiert und dort heißt dieser Erdgeschoss. Wenn ich die Seite neu laden will kommt auch die Fehlermeldung das der view nicht gefunden wurde. Was auch logisch ist da es diesen wirklich nicht gibt.

          Die große Frage ist jetzt warum ändert sich immer nach ein paar min der link im browser von ....mainaktuell#01_Navigation auf ....mainaktuell#Erdgeschoss

          Der Browser bei dem das Auftritt ist chrome, ich teste jetzt mal firefox und edge.

          Ich würde das klasse widget wirklich sehr sehr gerne nutzen, was aber so leider nicht möglich ist. Ich hoffe sehr das du oder irgend jemand mir weiter helfen kann...

          Edit:

          Es hat grad klick bei mir gemacht und ich hab gecheckt das ich selber schuld bin.

          Ich habe ein Skript laufen das alle 15 min den view zurück wechselt auf Erdgeschoss und das funktioniert so mit dem top app bar widget logischerweise nicht wirklich.

          Skript deaktiviert —> alles gut 🙂

          1 Reply Last reply
          0
          • MicM Offline
            MicM Offline
            Mic
            Developer
            wrote on last edited by Mic
            #65

            Tipp: Scrollbar entfernen oder anders stylen

            Hier die Antwort auf diese Frage:
            @saeft_2003 sagte in Vorstellung meiner VIS:

            @Scrounger und @Mic

            Was ich beim top app bar widget nicht so toll finde, ist die helle Scrollleiste. Ich weiß das dies Browser bedingt ist und das widget drauf keinen Einfluss hat, aber im Thread vom list widget gab es eine Lösung die Scrollleiste zu verbergen. Jetzt wollte ich euch fragen ob das mit dem top app bar widget auch funktioniert? Weil ich habe es nicht hinbekommen (ich nutze chrome).

            https://forum.iobroker.net/topic/29666/material-design-widgets-input-select-autocompl/19

            Getestet: Chrome, sowie Fully Browser

            Zunächst im "App Bar Widget" unter "Generell > CSS Klasse" z.B. eintragen: mAppBar

            1 - CSS zum Scrollbar entfernen

            /** Scrollbar entfernen: Für Chrome, Fully **/
            .mAppBar .mdc-drawer__content::-webkit-scrollbar {
                width: 0px;
                background: transparent; 
            }
            

            2 - Alternativ: Scrollbar ändern:

            /** Scrollbar: anderer Style (Chrome, Fully) **/
            .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
            .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
            .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
            .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
            

            Sieht dann z.B. so aus.
            scroll-x.png

            S ScroungerS NegaleinN 5 Replies Last reply
            3
            • MicM Mic

              Tipp: Scrollbar entfernen oder anders stylen

              Hier die Antwort auf diese Frage:
              @saeft_2003 sagte in Vorstellung meiner VIS:

              @Scrounger und @Mic

              Was ich beim top app bar widget nicht so toll finde, ist die helle Scrollleiste. Ich weiß das dies Browser bedingt ist und das widget drauf keinen Einfluss hat, aber im Thread vom list widget gab es eine Lösung die Scrollleiste zu verbergen. Jetzt wollte ich euch fragen ob das mit dem top app bar widget auch funktioniert? Weil ich habe es nicht hinbekommen (ich nutze chrome).

              https://forum.iobroker.net/topic/29666/material-design-widgets-input-select-autocompl/19

              Getestet: Chrome, sowie Fully Browser

              Zunächst im "App Bar Widget" unter "Generell > CSS Klasse" z.B. eintragen: mAppBar

              1 - CSS zum Scrollbar entfernen

              /** Scrollbar entfernen: Für Chrome, Fully **/
              .mAppBar .mdc-drawer__content::-webkit-scrollbar {
                  width: 0px;
                  background: transparent; 
              }
              

              2 - Alternativ: Scrollbar ändern:

              /** Scrollbar: anderer Style (Chrome, Fully) **/
              .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
              .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
              .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
              .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
              

              Sieht dann z.B. so aus.
              scroll-x.png

              S Offline
              S Offline
              saeft_2003
              Most Active
              wrote on last edited by
              #66

              @Mic

              Vielen Dank! Ich werde es nachher testen...

              1 Reply Last reply
              0
              • S Offline
                S Offline
                saeft_2003
                Most Active
                wrote on last edited by
                #67

                Funktioniert wunderbar, sieht gleich viel besser aus 🙂 👍

                EGneu2.jpg

                1 Reply Last reply
                0
                • MicM Mic

                  Tipp: Scrollbar entfernen oder anders stylen

                  Hier die Antwort auf diese Frage:
                  @saeft_2003 sagte in Vorstellung meiner VIS:

                  @Scrounger und @Mic

                  Was ich beim top app bar widget nicht so toll finde, ist die helle Scrollleiste. Ich weiß das dies Browser bedingt ist und das widget drauf keinen Einfluss hat, aber im Thread vom list widget gab es eine Lösung die Scrollleiste zu verbergen. Jetzt wollte ich euch fragen ob das mit dem top app bar widget auch funktioniert? Weil ich habe es nicht hinbekommen (ich nutze chrome).

                  https://forum.iobroker.net/topic/29666/material-design-widgets-input-select-autocompl/19

                  Getestet: Chrome, sowie Fully Browser

                  Zunächst im "App Bar Widget" unter "Generell > CSS Klasse" z.B. eintragen: mAppBar

                  1 - CSS zum Scrollbar entfernen

                  /** Scrollbar entfernen: Für Chrome, Fully **/
                  .mAppBar .mdc-drawer__content::-webkit-scrollbar {
                      width: 0px;
                      background: transparent; 
                  }
                  

                  2 - Alternativ: Scrollbar ändern:

                  /** Scrollbar: anderer Style (Chrome, Fully) **/
                  .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
                  .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
                  .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
                  .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
                  

                  Sieht dann z.B. so aus.
                  scroll-x.png

                  S Offline
                  S Offline
                  saeft_2003
                  Most Active
                  wrote on last edited by
                  #68

                  @Mic

                  Sollte das scrollbar verändern/entfernen bei jedem widget funktionieren?

                  Weil ich habe es bei einem html widget (Adapterstatus) probiert und da hat es nicht funktioniert.

                  MicM 1 Reply Last reply
                  0
                  • ? Offline
                    ? Offline
                    A Former User
                    wrote on last edited by
                    #69

                    Hallo zusammen,
                    ich muss mich jetzt mal als doof outen.
                    Ich habe das Widget mit Menüs und Submenüs eingerichtet, soweit so gut.
                    Ich verstehe aber nicht, wie ich die Verknüpfung auf ein anderen View hinbekomme.
                    Die ObjektID habe ich eingerichtet und in der TopAppBar eingetragen.
                    Wo und wie muss ich das view8 einrichten? Ich stehe da vollkommen auf dem Schlauch.

                    Danke im vorraus.

                    liv-in-skyL 1 Reply Last reply
                    0
                    • ? A Former User

                      Hallo zusammen,
                      ich muss mich jetzt mal als doof outen.
                      Ich habe das Widget mit Menüs und Submenüs eingerichtet, soweit so gut.
                      Ich verstehe aber nicht, wie ich die Verknüpfung auf ein anderen View hinbekomme.
                      Die ObjektID habe ich eingerichtet und in der TopAppBar eingetragen.
                      Wo und wie muss ich das view8 einrichten? Ich stehe da vollkommen auf dem Schlauch.

                      Danke im vorraus.

                      liv-in-skyL Offline
                      liv-in-skyL Offline
                      liv-in-sky
                      wrote on last edited by liv-in-sky
                      #70

                      @telekom0815 ich habe jetzt eine zentrale seite in dieser ist nur das app bar widget links oben und zusätzlich das view8 widget über die ganze seite gezogen - und im view8 sind die ganzen anderen seiten verlinkt.

                      so sieht das view8 aus - der wert schalter ist in beiden widgets gleich - die zentrale seite heißt 0galaxy - darin sind die beiden widgets

                      Image 2.png view8 widget

                      Image 3.png app bar widget

                      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                      M 1 Reply Last reply
                      0
                      • liv-in-skyL liv-in-sky

                        @telekom0815 ich habe jetzt eine zentrale seite in dieser ist nur das app bar widget links oben und zusätzlich das view8 widget über die ganze seite gezogen - und im view8 sind die ganzen anderen seiten verlinkt.

                        so sieht das view8 aus - der wert schalter ist in beiden widgets gleich - die zentrale seite heißt 0galaxy - darin sind die beiden widgets

                        Image 2.png view8 widget

                        Image 3.png app bar widget

                        M Offline
                        M Offline
                        Mottimuc
                        wrote on last edited by
                        #71

                        @liv-in-sky
                        @telekom0815
                        Im Grunde musst Du noch zuvor die "Unterviews" für das View8 erstellen.
                        Du hast dann folgende Struktur:

                        View 1 (mit den beiden Widgets)
                        TopAppBar mit dem DP
                        View8, die diesen Datenpunkt aufgreift

                        Daneben die einzelnen Views, die Du aus dem Menü aufrufen möchtest
                        View U1
                        View U2
                        ....
                        View Un

                        Diese kannst frei gestalten und benennen. SIe müssen nur in dem View8-Widget eingetragen werden.

                        Viele Grüße
                        Michael

                        ScroungerS 1 Reply Last reply
                        0
                        • M Mottimuc

                          @liv-in-sky
                          @telekom0815
                          Im Grunde musst Du noch zuvor die "Unterviews" für das View8 erstellen.
                          Du hast dann folgende Struktur:

                          View 1 (mit den beiden Widgets)
                          TopAppBar mit dem DP
                          View8, die diesen Datenpunkt aufgreift

                          Daneben die einzelnen Views, die Du aus dem Menü aufrufen möchtest
                          View U1
                          View U2
                          ....
                          View Un

                          Diese kannst frei gestalten und benennen. SIe müssen nur in dem View8-Widget eingetragen werden.

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

                          @Mottimuc
                          Hier findet ihr auch eine gute Anleitung:
                          https://www.smarthome-tricks.de/

                          <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                          <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                          1 Reply Last reply
                          0
                          • S saeft_2003

                            @Mic

                            Sollte das scrollbar verändern/entfernen bei jedem widget funktionieren?

                            Weil ich habe es bei einem html widget (Adapterstatus) probiert und da hat es nicht funktioniert.

                            MicM Offline
                            MicM Offline
                            Mic
                            Developer
                            wrote on last edited by
                            #73

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

                            @Mic
                            Sollte das scrollbar verändern/entfernen bei jedem widget funktionieren?
                            Weil ich habe es bei einem html widget (Adapterstatus) probiert und da hat es nicht funktioniert.

                            Du musst halt das CSS entsprechend anpassen. In Chrome/Firefox kann gut mit eingebauten "Developer Tools" gearbeitet werden. Dazu im Browser VIS im View-Modus öffnen, dann mit <F12> Developer-Tool anzeigen, dann Ctrl+Shift+C für den Picker. Einfach mal nach css chrome developer tools googlen, Einlesen, und selbst probieren.
                            Eine Pauschal-Lösung wird es wegen CSS-Architektur hier wohl nicht wirklich nicht geben, da jedes Element unterschiedlich.

                            S 1 Reply Last reply
                            0
                            • MicM Mic

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

                              @Mic
                              Sollte das scrollbar verändern/entfernen bei jedem widget funktionieren?
                              Weil ich habe es bei einem html widget (Adapterstatus) probiert und da hat es nicht funktioniert.

                              Du musst halt das CSS entsprechend anpassen. In Chrome/Firefox kann gut mit eingebauten "Developer Tools" gearbeitet werden. Dazu im Browser VIS im View-Modus öffnen, dann mit <F12> Developer-Tool anzeigen, dann Ctrl+Shift+C für den Picker. Einfach mal nach css chrome developer tools googlen, Einlesen, und selbst probieren.
                              Eine Pauschal-Lösung wird es wegen CSS-Architektur hier wohl nicht wirklich nicht geben, da jedes Element unterschiedlich.

                              S Offline
                              S Offline
                              saeft_2003
                              Most Active
                              wrote on last edited by
                              #74

                              @Mic

                              OK danke für die Info

                              1 Reply Last reply
                              0
                              • MicM Mic

                                Tipp: Scrollbar entfernen oder anders stylen

                                Hier die Antwort auf diese Frage:
                                @saeft_2003 sagte in Vorstellung meiner VIS:

                                @Scrounger und @Mic

                                Was ich beim top app bar widget nicht so toll finde, ist die helle Scrollleiste. Ich weiß das dies Browser bedingt ist und das widget drauf keinen Einfluss hat, aber im Thread vom list widget gab es eine Lösung die Scrollleiste zu verbergen. Jetzt wollte ich euch fragen ob das mit dem top app bar widget auch funktioniert? Weil ich habe es nicht hinbekommen (ich nutze chrome).

                                https://forum.iobroker.net/topic/29666/material-design-widgets-input-select-autocompl/19

                                Getestet: Chrome, sowie Fully Browser

                                Zunächst im "App Bar Widget" unter "Generell > CSS Klasse" z.B. eintragen: mAppBar

                                1 - CSS zum Scrollbar entfernen

                                /** Scrollbar entfernen: Für Chrome, Fully **/
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar {
                                    width: 0px;
                                    background: transparent; 
                                }
                                

                                2 - Alternativ: Scrollbar ändern:

                                /** Scrollbar: anderer Style (Chrome, Fully) **/
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
                                

                                Sieht dann z.B. so aus.
                                scroll-x.png

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

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

                                Getestet: Chrome, sowie Fully Browser

                                Zunächst im "App Bar Widget" unter "Generell > CSS Klasse" z.B. eintragen: mAppBar

                                1 - CSS zum Scrollbar entfernen

                                /** Scrollbar entfernen: Für Chrome, Fully **/
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar {
                                    width: 0px;
                                    background: transparent; 
                                }
                                

                                2 - Alternativ: Scrollbar ändern:

                                /** Scrollbar: anderer Style (Chrome, Fully) **/
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
                                .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
                                

                                Sieht dann z.B. so aus.
                                scroll-x.png

                                Ich schau mal ob ich das direkt in die Widgets einbauen kann, so dass es über den Editor konfigurierbar ist.

                                <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                S ScroungerS 2 Replies Last reply
                                3
                                • ScroungerS Scrounger

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

                                  Getestet: Chrome, sowie Fully Browser

                                  Zunächst im "App Bar Widget" unter "Generell > CSS Klasse" z.B. eintragen: mAppBar

                                  1 - CSS zum Scrollbar entfernen

                                  /** Scrollbar entfernen: Für Chrome, Fully **/
                                  .mAppBar .mdc-drawer__content::-webkit-scrollbar {
                                      width: 0px;
                                      background: transparent; 
                                  }
                                  

                                  2 - Alternativ: Scrollbar ändern:

                                  /** Scrollbar: anderer Style (Chrome, Fully) **/
                                  .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
                                  .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
                                  .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
                                  .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
                                  

                                  Sieht dann z.B. so aus.
                                  scroll-x.png

                                  Ich schau mal ob ich das direkt in die Widgets einbauen kann, so dass es über den Editor konfigurierbar ist.

                                  S Offline
                                  S Offline
                                  saeft_2003
                                  Most Active
                                  wrote on last edited by
                                  #76

                                  @Scrounger

                                  Das wäre top 👍

                                  1 Reply Last reply
                                  1
                                  • M Offline
                                    M Offline
                                    Mottimuc
                                    wrote on last edited by
                                    #77

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

                                    @Scrounger
                                    Das wäre top

                                    ABSOLUT!!

                                    Viele Grüße
                                    Michael

                                    1 Reply Last reply
                                    0
                                    • ScroungerS Scrounger

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

                                      Getestet: Chrome, sowie Fully Browser

                                      Zunächst im "App Bar Widget" unter "Generell > CSS Klasse" z.B. eintragen: mAppBar

                                      1 - CSS zum Scrollbar entfernen

                                      /** Scrollbar entfernen: Für Chrome, Fully **/
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar {
                                          width: 0px;
                                          background: transparent; 
                                      }
                                      

                                      2 - Alternativ: Scrollbar ändern:

                                      /** Scrollbar: anderer Style (Chrome, Fully) **/
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
                                      

                                      Sieht dann z.B. so aus.
                                      scroll-x.png

                                      Ich schau mal ob ich das direkt in die Widgets einbauen kann, so dass es über den Editor konfigurierbar ist.

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

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

                                      Ich schau mal ob ich das direkt in die Widgets einbauen kann, so dass es über den Editor konfigurierbar ist.

                                      Ok eine Integration führt dazu, dass die scrollbars dann aufm handy und tablet auch beeinflusst werden. Da ich die Handy / Tablet scrollbar aber sehr gut finde - weil die automatisch ausblenden - macht ein integration für mich keinen Sinn, sorry.
                                      Ich nutze hauptsächlich Handy & Tablet.

                                      <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                      <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                      M liv-in-skyL 2 Replies Last reply
                                      0
                                      • ScroungerS Scrounger

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

                                        Ich schau mal ob ich das direkt in die Widgets einbauen kann, so dass es über den Editor konfigurierbar ist.

                                        Ok eine Integration führt dazu, dass die scrollbars dann aufm handy und tablet auch beeinflusst werden. Da ich die Handy / Tablet scrollbar aber sehr gut finde - weil die automatisch ausblenden - macht ein integration für mich keinen Sinn, sorry.
                                        Ich nutze hauptsächlich Handy & Tablet.

                                        M Offline
                                        M Offline
                                        Mottimuc
                                        wrote on last edited by
                                        #79

                                        @Scrounger

                                        hilf mir mal bitte. Wenn die Scrollleisten weg sind, kann man doch trotzdem scrollen, nur man sieht den "Fortschritt" nicht mehr?

                                        Wenn ich ne Card von Dir auf calc(100%-xxPX) einstelle, dann kann ich damit aber nicht einen Platz für die Scrollleiste "freilassen"?
                                        Oder würde das dann eben genauso funtkionieren?

                                        Viele Grüße
                                        Michael

                                        1 Reply Last reply
                                        0
                                        • ScroungerS Scrounger

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

                                          Ich schau mal ob ich das direkt in die Widgets einbauen kann, so dass es über den Editor konfigurierbar ist.

                                          Ok eine Integration führt dazu, dass die scrollbars dann aufm handy und tablet auch beeinflusst werden. Da ich die Handy / Tablet scrollbar aber sehr gut finde - weil die automatisch ausblenden - macht ein integration für mich keinen Sinn, sorry.
                                          Ich nutze hauptsächlich Handy & Tablet.

                                          liv-in-skyL Offline
                                          liv-in-skyL Offline
                                          liv-in-sky
                                          wrote on last edited by liv-in-sky
                                          #80

                                          ich habe einen seltsamen fehler und weiß nicht woher - das menu app widget verändert die einstellungen - evtl ist die übertragung des vis editors durch probleme mit einem beschäftigten chrome browser - aber ich hatte das jetzt schön öfter, dass in den unter menüs plötzlich werte stehen , die ich nicht eingegeben habe ( -1 ist sehr häufig drin - obwohl vorher 0 drin stand) im bild dieht man die 4 - die habe ich auch nicht eingegeben

                                          kennt das noch jemand oder ist es ein lokales problem ( ist aber nur im app menu widget)

                                          heute morgen war das noch nicht - hatte rechner im energiesparmodus

                                          Image 2.png Image 1.png

                                          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                          ScroungerS 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

                                          753

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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