Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. schönere scrollbar in der vis

    NEWS

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    schönere scrollbar in der vis

    This topic has been deleted. Only users with topic management privileges can see it.
    • liv-in-sky
      liv-in-sky last edited by liv-in-sky

      weiß jmd, wie man die scrollbar schöner bekommt ? nicht das langweilige grau

      ich dachte, ich hatte sowas mal gesehen - kann aber nix mehr finden

      z.b.

      Image 9.png

      @sigi234

      liv-in-sky 1 Reply Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @liv-in-sky last edited by liv-in-sky

        @sigi234

        falls jmd eine bessere lösung hat - bitte posten ( arbeitet in chrome)
        habe das gefunden in der ccs eintragen - wirkt sich aber auch auf den editor aus- ist mir aber nicht so wichtig

        ::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: #468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

        die unsichtbare version - weiß nicht, ob die irgenwann mal probleme macht:

        ::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: transparent;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color:transparent;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

        Image 10.png

        anim-gif2.gif

        Scrounger 1 Reply Last reply Reply Quote 0
        • Scrounger
          Scrounger Developer @liv-in-sky last edited by Scrounger

          @liv-in-sky

          @liv-in-sky sagte in schönere scrollbar in der vis:

          ich dachte, ich hatte sowas mal gesehen - kann aber nix mehr finden

          ja das gibt es irgendwo in den tiefen der ganzen MDW Themen 😉

          /* custom scrollbar layout */
  @media only screen and (min-width: 1025px) {
    :root {
        --material-design-widget-scrollbar-color: #cdcdcd;
        --material-design-widget-scrollbar-track-color: #f0f0f0;
        
        /* Firefox */
        --material-design-widget-scrollbar-style: thin;
        
        /* nur Chrome, Edge, Safari */
        --material-design-widget-scrollbar-width: 7.5px;
        --material-design-widget-scrollbar-radius: 0px;
        --material-design-widget-scrollbar-hover-color: #a6a6a6;
    }
    
    /* Firefox */
    .materialdesign-widget, 
    .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content, 
    .v-menu__content.menuable__content__active,
    .materialdesign-widget .v-calendar-daily__scroll-area,
    .materialdesign-widget .mdc-data-table,
    .materialdesign-widget .mdc-data-table__content {
        scrollbar-width: var(--material-design-widget-scrollbar-style);
        scrollbar-color: var(--material-design-widget-scrollbar-color) var(--material-design-widget-scrollbar-track-color);
    }
    
    /* Chrome, Edge, Safari */
    .materialdesign-widget::-webkit-scrollbar,
    .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content::-webkit-scrollbar,
    .v-menu__content.menuable__content__active::-webkit-scrollbar, 
    .materialdesign-widget .v-calendar-daily__scroll-area::-webkit-scrollbar,
    .materialdesign-widget .mdc-data-table::-webkit-scrollbar,
    .materialdesign-widget .mdc-data-table__content::-webkit-scrollbar {
        width: var(--material-design-widget-scrollbar-width);
    }
    .materialdesign-widget::-webkit-scrollbar-track, 
    .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content::-webkit-scrollbar-track, 
    .v-menu__content.menuable__content__active::-webkit-scrollbar-track,
    .materialdesign-widget .v-calendar-daily__scroll-area::-webkit-scrollbar-track,
    .materialdesign-widget .mdc-data-table::-webkit-scrollbar-track,
    .materialdesign-widget .mdc-data-table__content::-webkit-scrollbar-track {
        background: var(--material-design-widget-scrollbar-track-color);
    }
    .materialdesign-widget::-webkit-scrollbar-thumb,     
    .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content::-webkit-scrollbar-thumb, 
    .v-menu__content.menuable__content__active::-webkit-scrollbar-thumb,
    .materialdesign-widget .v-calendar-daily__scroll-area::-webkit-scrollbar-thumb,
    .materialdesign-widget .mdc-data-table::-webkit-scrollbar-thumb,
    .materialdesign-widget .mdc-data-table__content::-webkit-scrollbar-thumb {
        background-color: var(--material-design-widget-scrollbar-color);
        border-right: 1px solid white;
        border-radius: var(--material-design-widget-scrollbar-radius);
    }
    .materialdesign-widget::-webkit-scrollbar-thumb:hover, 
    .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content::-webkit-scrollbar-thumb:hover, 
    .v-menu__content.menuable__content__active::-webkit-scrollbar-thumb:hover,
    .materialdesign-widget .v-calendar-daily__scroll-area::-webkit-scrollbar-thumb:hover,
    .materialdesign-widget .mdc-data-table::-webkit-scrollbar-thumb:hover,
    .materialdesign-widget .mdc-data-table__content::-webkit-scrollbar-thumb:hover {
        background: var(--material-design-widget-scrollbar-hover-color);
    }
}

          im oberen Bereich kannst die Farben, Breite, etc. definieren, funktioniert aber nicht bei jedem browser

              :root {
        --material-design-widget-scrollbar-color: #cdcdcd;
        --material-design-widget-scrollbar-track-color: #f0f0f0;
        
        /* Firefox */
        --material-design-widget-scrollbar-style: thin;
        
        /* nur Chrome, Edge, Safari */
        --material-design-widget-scrollbar-width: 7.5px;
        --material-design-widget-scrollbar-radius: 0px;
        --material-design-widget-scrollbar-hover-color: #a6a6a6;
    }

          Und du musst halt noch ggf. die ccs klassen anpassen, da diese in dem Beispiel nur auf die MDW angewendet werden.

          Edit: hier war es:
          https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget/88

          liv-in-sky 1 Reply Last reply Reply Quote 0
          • liv-in-sky
            liv-in-sky @Scrounger last edited by

            @Scrounger

            css ist nicht gerade meine stärke

            das hier funktioniert sehr gut :

            ::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: #468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

            ist halt auf alles angewendet - der vis-editor ist ok aber wenn ich mal ein anderes widget mit einer anderen farbe (im scroll-balken) möchte, weiß ich nicht, wie man so ein webkit auf ein einzelnes widget "hindreht" - das transparente finde ich eigentlich sehr gut, aber ich möchte das nicht im editor sondern nur bei vereinzelten widgets - ist dann so ähnlich wie im handy - man kann scrollen, sieht aber diese leiste an der seite nicht - mit meiner momentanen einstellung gibt es auch kein problem mit z.b deinen widgets (z.b table)

            weißt du evtl, wie ich einen bestimmt formatierten webkit in eine klasse bekomme, die dann auf ein html standard widget angewendet werden kann über die klassen definition unter generell

            habe es so versucht: funktionert leider nicht
            css:

            .myscrolli::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: #468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

            widget:
            Image 11.png

            Glasfaser 1 Reply Last reply Reply Quote 0
            • Glasfaser
              Glasfaser @liv-in-sky last edited by

              @liv-in-sky sagte in schönere scrollbar in der vis:

              habe es so versucht: funktionert leider nicht

              Funktioniert doch ... dein weg mit ".myscrolli::-webkit-scrollbar" ist schon richtig !
              .
              2.JPG
              .

              siehe auch hier : Link Text

              liv-in-sky 1 Reply Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @Glasfaser last edited by

                @Glasfaser ja das funktioniert - aber ich muss dann das "ohne klasse" rausnehmen. d.h ich muss für jedes element , welches eine scrollbalken hat, die klasse eingeben - ist aber auch nicht wild

                einzeln eine klasse definieren funktioniert mit dem hier nicht (der untere teil überschreibt alles):

                .myscrolli::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: red;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: #468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

                ich weiß - luxus probleme - aber ich finde es garnicht so schlecht, auch im editor die "schlanken" scrollbalken zu haben

                Glasfaser 1 Reply Last reply Reply Quote 0
                • Glasfaser
                  Glasfaser @liv-in-sky last edited by Glasfaser

                  @liv-in-sky sagte in schönere scrollbar in der vis:

                  ich weiß - luxus probleme -

                  Ist über den Befehl machbar

                  #visview_1 ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

                  brauchst auch kein CSS bei den Widgets eintragen , ist dann nur für die aktive Seite die im CSS eingetragen ist aktiv

                  1.JPG

                  hier bei meinem Beispiel heißt der View "1" , und auch nur dort wirkt sich der CSS aus .

                  liv-in-sky 1 Reply Last reply Reply Quote 1
                  • liv-in-sky
                    liv-in-sky @Glasfaser last edited by liv-in-sky

                    @Glasfaser danke - gute idee - funktioniert

                    habe eh einige views die eigenes farb-layout haben

                    Glasfaser 1 Reply Last reply Reply Quote 0
                    • Glasfaser
                      Glasfaser @liv-in-sky last edited by

                      @liv-in-sky sagte in schönere scrollbar in der vis:

                      ..... die eigenes farb-layout haben

                      Ja ... das kenne ich von Dir 😉

                      liv-in-sky 1 Reply Last reply Reply Quote 0
                      • liv-in-sky
                        liv-in-sky @Glasfaser last edited by

                        @Glasfaser ist tagesabhängig - manchmal ist es hellblau - manchmal gibt es giftgrün - konnte noch nicht eruieren , was wann warum dran ist 🙂

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

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        396
                        Online

                        32.0k
                        Users

                        80.5k
                        Topics

                        1.3m
                        Posts

                        vis
                        3
                        10
                        731
                        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