Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  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.7k

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

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

Material Design Widgets: Top App Bar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
412 Beiträge 74 Kommentatoren 89.0k Aufrufe 79 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • Chris TailorC Chris Tailor

    Das letzte "Problem", was ich mit der Top App Bar habe ist die Höhe der Menüpunkte. Kann man diese unabhängig von der Grösse des Symbols definieren? Mit den Chrome Entwickler Tools konnte ich die Höhe ohne Probleme manipulieren:
    3eaddab7-99d8-4163-bf06-9cf16114cb8a-image.png

    <div class="mdc-list-item mdc-ripple-upgraded" tabindex="-1" id="listItem_3" style="height: 120px !important;" data-value=""><span class="mdi mdi-train materialdesign-icon-image mdc-list-item__graphic" style="width: 20px !important;; height: 20px !important;; font-size: 20px !important;; color: #ffffff; padding-top: 8px; padding-bottom: 8px;;"></span><span class="mdc-list-item__text mdc-typography--headline5" id="listItem_3" style="width: 100%; text-align: left; ">
                                            SBB
                                    </span></div>
    

    Global über einen CSS Eintrag habe ich das nicht hinbekommen, bzw. die Höhe ändert sich nicht:

    .mdc-list-item .mdc-ripple-upgraded { 
        height: 120px !important;
    }
    

    Jemand eine Idee?

    DickenD Offline
    DickenD Offline
    Dicken
    schrieb am zuletzt editiert von
    #398

    @chris-tailor said in Material Design Widgets: Top App Bar Widget:

    Das letzte "Problem", was ich mit der Top App Bar habe ist die Höhe der Menüpunkte. Kann man diese unabhängig von der Grösse des Symbols definieren? Mit den Chrome Entwickler Tools konnte ich die Höhe ohne Probleme manipulieren:
    3eaddab7-99d8-4163-bf06-9cf16114cb8a-image.png

    <div class="mdc-list-item mdc-ripple-upgraded" tabindex="-1" id="listItem_3" style="height: 120px !important;" data-value=""><span class="mdi mdi-train materialdesign-icon-image mdc-list-item__graphic" style="width: 20px !important;; height: 20px !important;; font-size: 20px !important;; color: #ffffff; padding-top: 8px; padding-bottom: 8px;;"></span><span class="mdc-list-item__text mdc-typography--headline5" id="listItem_3" style="width: 100%; text-align: left; ">
                                            SBB
                                    </span></div>
    

    Global über einen CSS Eintrag habe ich das nicht hinbekommen, bzw. die Höhe ändert sich nicht:

    .mdc-list-item .mdc-ripple-upgraded { 
        height: 120px !important;
    }
    

    Jemand eine Idee?

    Hey, ich weiß das der Beitrag hier schon uralt ist, aber hab in dem Thread hier keine Antwort dazu gefunden.
    Habe das selbe Problem und würde die Höhe auch gern ändern, hat da jemand ne Möglichkeit für mich?

    1 Antwort Letzte Antwort
    0
    • I Offline
      I Offline
      it00x32
      schrieb am zuletzt editiert von
      #399

      Höhe von Top Titel

      ich steh etwas auf der Leitung. Wie kann ich das Fenster des Kopfzeilentext kleiner machen (schwarze Box wo Titel und Subtitel drinnen steht, Nav ist Permanent)?

      Der CSS Eintrag .mdc-top-app-bar__row giltet ja nur für die Leiste neben dem Menü

      Bildschirmfoto 2022-04-11 um 10.52.04.png

      Danke

      1 Antwort Letzte Antwort
      0
      • Martin BlankM Offline
        Martin BlankM Offline
        Martin Blank
        schrieb am zuletzt editiert von
        #400

        Guten Abend zusammen.

        ist es in der neuen Version irgendwie möglich ein 2 Faches Untermenü zu machen?
        Bsp.:

        • EG
          • Küche
          • Wohnzimmer
            - Licht
            - Rolladen
            - usw.
          • Büro

        Wäre dankbar für Tipps.

        1 Antwort Letzte Antwort
        0
        • P Offline
          P Offline
          prorun
          schrieb am zuletzt editiert von
          #401

          Hallo Zusammen,

          ich würde gerne meine Top App Bar auf eine Höhe von 30px verkleinern. Also ungefähr halb so groß wie die dense-Variante die man über das Layout einstellen kann.

          Bei einer höhe von nur 30px müsste jedoch auch der Menu-button (Navigation icon) entsprechend kleiner werden. Gibt es eine Möglichkeit das umzusetzen.

          Hintergrund: vis wird auf einem iPhone 13 Mini dargestellt und da verschlingt selbst die dense-Variante viel zu viel Platz.

          Vielen Dank schon mal vorab!

          T 1 Antwort Letzte Antwort
          0
          • P prorun

            Hallo Zusammen,

            ich würde gerne meine Top App Bar auf eine Höhe von 30px verkleinern. Also ungefähr halb so groß wie die dense-Variante die man über das Layout einstellen kann.

            Bei einer höhe von nur 30px müsste jedoch auch der Menu-button (Navigation icon) entsprechend kleiner werden. Gibt es eine Möglichkeit das umzusetzen.

            Hintergrund: vis wird auf einem iPhone 13 Mini dargestellt und da verschlingt selbst die dense-Variante viel zu viel Platz.

            Vielen Dank schon mal vorab!

            T Offline
            T Offline
            Trikolon
            schrieb am zuletzt editiert von
            #402

            Hallo zusammen,
            ich würde gerne die TopBar im Strandart verwenden und in dem "blauen" Bereich der TopBar, also rechts Neben dem Namen des MenuItems ein paar Infos anzeigen lassen. Leider scrollen dies mit nach oben, wenn ich scrolle:
            Soll Zustand der beiden weißen Zahlen oben rechts:
            49ae10d8-f459-4dc9-9f2c-39a64598721c-image.png

            Nach etwas Scrollen nach unten:
            163010b1-351a-4161-a4e2-974a0deb61ee-image.png

            Wie kann ich die Zahlen denn persistent in der Position machen?

            Danke und Gruß
            Ben

            1 Antwort Letzte Antwort
            0
            • frank2604F Offline
              frank2604F Offline
              frank2604
              schrieb am zuletzt editiert von
              #403

              Hier kurz mein Workaround für den Github-Issue #212 "Top Bar App: Objekt ID wird ab Element 9 wieder auf 0 gesetzt"

              Ich verwende zwei Datenpunkte:

              2023-01-22_09-25-00.jpg

              und ein Skript:

              2023-01-22_09-24-15.jpg

              Datenpunkt in Top App Bar:

              2023-01-22_09-26-15.jpg

              Datenpunkt in View in Widget8:

              2023-01-22_09-26-40.jpg

              Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
              Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

              1 Antwort Letzte Antwort
              0
              • A Offline
                A Offline
                aproxxo
                schrieb am zuletzt editiert von
                #404

                Guten Tag,
                ich bin noch ganz neu in ioBroker.
                Ich würde gerne mit dem Menü anfangen. Leider wird mir das gar nicht angezeigt. Nur in der Runtime. Finde leider nicht die Lösung.
                Und wie machen die Profis die Auflösung. Schön wäre es, wenn es sich an die Geräte anpassen würde.
                Vielen Dank

                b054594d-629a-44ed-825b-aec7e383a210-Bildschirmfoto 2025-04-19 um 09.22.28.png Bildschirmfoto 2025-04-19 um 09.22.28

                O 1 Antwort Letzte Antwort
                0
                • A aproxxo

                  Guten Tag,
                  ich bin noch ganz neu in ioBroker.
                  Ich würde gerne mit dem Menü anfangen. Leider wird mir das gar nicht angezeigt. Nur in der Runtime. Finde leider nicht die Lösung.
                  Und wie machen die Profis die Auflösung. Schön wäre es, wenn es sich an die Geräte anpassen würde.
                  Vielen Dank

                  b054594d-629a-44ed-825b-aec7e383a210-Bildschirmfoto 2025-04-19 um 09.22.28.png Bildschirmfoto 2025-04-19 um 09.22.28

                  O Online
                  O Online
                  Oli
                  schrieb am zuletzt editiert von
                  #405

                  @aproxxo
                  Benutzt du VIS 1, oder VIS 2? In der VIS 2 funktionieren die Widgets nicht

                  Gruß
                  Oliver

                  A 1 Antwort Letzte Antwort
                  0
                  • O Oli

                    @aproxxo
                    Benutzt du VIS 1, oder VIS 2? In der VIS 2 funktionieren die Widgets nicht

                    A Offline
                    A Offline
                    aproxxo
                    schrieb am zuletzt editiert von
                    #406

                    @oli ich benutze die Vis2.
                    Ach dann gibt es auch ein Sinn. Mir wird das Widget nur im Runtime angezeigt.

                    Welchen Möglichkeiten würdest du mir vorschlagen? Ich würde gerne ein Menü haben das sich aufklappt. Und dann zusätzlich noch ein Untermenü.

                    sigi234S 1 Antwort Letzte Antwort
                    0
                    • A aproxxo

                      @oli ich benutze die Vis2.
                      Ach dann gibt es auch ein Sinn. Mir wird das Widget nur im Runtime angezeigt.

                      Welchen Möglichkeiten würdest du mir vorschlagen? Ich würde gerne ein Menü haben das sich aufklappt. Und dann zusätzlich noch ein Untermenü.

                      sigi234S Online
                      sigi234S Online
                      sigi234
                      Forum Testing Most Active
                      schrieb am zuletzt editiert von
                      #407

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

                      Welchen Möglichkeiten würdest du mir vorschlagen? Ich würde gerne ein Menü haben das sich aufklappt. Und dann zusätzlich noch ein Untermenü.

                      https://github.com/ioBroker/ioBroker.vis-2/issues/253

                      Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                      Immer Daten sichern!

                      A 1 Antwort Letzte Antwort
                      0
                      • sigi234S sigi234

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

                        Welchen Möglichkeiten würdest du mir vorschlagen? Ich würde gerne ein Menü haben das sich aufklappt. Und dann zusätzlich noch ein Untermenü.

                        https://github.com/ioBroker/ioBroker.vis-2/issues/253

                        A Offline
                        A Offline
                        aproxxo
                        schrieb am zuletzt editiert von
                        #408

                        @sigi234 oh okay vielen Dank.

                        Gibt es dann eine alternative zu diesem Widget? Wie machen das hier die Profis denn?

                        1 Antwort Letzte Antwort
                        0
                        • A Offline
                          A Offline
                          aproxxo
                          schrieb am zuletzt editiert von
                          #409

                          Leider werden mir nicht mal die Basis Widgets im Editor angezeigt. Ich glaube ich habe ein ganz anderes Problem.

                          55d9cbfb-0be6-4275-b00f-8b6ff7e756e4-Bildschirmfoto 2025-04-19 um 10.45.41.png Bildschirmfoto 2025-04-19 um 10.45.41

                          sigi234S 1 Antwort Letzte Antwort
                          0
                          • A aproxxo

                            Leider werden mir nicht mal die Basis Widgets im Editor angezeigt. Ich glaube ich habe ein ganz anderes Problem.

                            55d9cbfb-0be6-4275-b00f-8b6ff7e756e4-Bildschirmfoto 2025-04-19 um 10.45.41.png Bildschirmfoto 2025-04-19 um 10.45.41

                            sigi234S Online
                            sigi234S Online
                            sigi234
                            Forum Testing Most Active
                            schrieb am zuletzt editiert von sigi234
                            #410

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

                            Leider werden mir nicht mal die Basis Widgets im Editor angezeigt. Ich glaube ich habe ein ganz anderes Problem.

                            VIS2 Version?

                            Screenshot (1156).png

                            Schon mal einen upload vis-2 gemacht?

                            Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                            Immer Daten sichern!

                            1 Antwort Letzte Antwort
                            0
                            • A Offline
                              A Offline
                              aproxxo
                              schrieb am zuletzt editiert von
                              #411

                              @sigi234 ich hab die Lösung.
                              Habe auf Beta umgestellt und jetzt wird alles angezeigt. Danke!

                              K 1 Antwort Letzte Antwort
                              0
                              • A aproxxo

                                @sigi234 ich hab die Lösung.
                                Habe auf Beta umgestellt und jetzt wird alles angezeigt. Danke!

                                K Offline
                                K Offline
                                Kippe
                                schrieb am zuletzt editiert von Kippe
                                #412

                                Hallo
                                Ich habe das Problem, das ich auf meinem Tablett unter Fully die Materaldesign Bar nich nach unten scrollen kann. Auf dem Pc mit dem Chrom Brouser geht es auch nicht. Was mache ich da Falsch?

                                IMG_0632.jpeg

                                1 Antwort Letzte Antwort
                                0
                                Antworten
                                • In einem neuen Thema antworten
                                Anmelden zum Antworten
                                • Älteste zuerst
                                • Neuste zuerst
                                • Meiste Stimmen


                                Support us

                                ioBroker
                                Community Adapters
                                Donate

                                846

                                Online

                                32.4k

                                Benutzer

                                81.5k

                                Themen

                                1.3m

                                Beiträge
                                Community
                                Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                ioBroker Community 2014-2025
                                logo
                                • Anmelden

                                • Du hast noch kein Konto? Registrieren

                                • Anmelden oder registrieren, um zu suchen
                                • Erster Beitrag
                                  Letzter Beitrag
                                0
                                • Home
                                • Aktuell
                                • Tags
                                • Ungelesen 0
                                • Kategorien
                                • Unreplied
                                • Beliebt
                                • GitHub
                                • Docu
                                • Hilfe