No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    i want custom scroll bar in table

    Framework
    3
    3
    1492
    Loading More Posts
    • 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.
    • Q
      qwerty last edited by

      abcd.png styledthumb and bar

      i want scroll styledthumb and bar in table insted of normal scroll

      xyz.png

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @qwerty last edited by dobbel

        @qwerty

        This is not yet supported in Quasar. You could look in open Quasar Github issues if there is already a feature request for this. If not you could create one.

        But maybe you could use this:

        https://binaryify.github.io/vue-custom-scrollbar/en/

        1 Reply Last reply Reply Quote 0
        • T
          tdumitr last edited by

          I was just grappling with the same problem. The issue I am facing is that on the same page I have a QScrollArea and a QTable and, obviously, they have very different scrollbars. I did get close, by using ::webkit-scrollbar. There are a couple of issues with my solution:

          1. The QScrollArea uses transparent scroll thumb. However, the opacity property does not seem to work for ::webkit-scrollbar or for ::webkit-scrollbar-thumb.
          2. The QScrollArea uses a transition when showing/hiding the scrollbar. Again, the transition property does not seem to work for ::webkit-scrollbar or for ::webkit-scrollbar-thumb.
          3. The scrollbar for the table occupies a piece of the table header on the right side. This is a consequence of the opacity not working.
          4. Most importantly, the ::webkit-xxx works for WebKit browsers, but not for Gecko or IE. I know IE is sort of dying out, but Firefox has a loyal following, and the Tor browser is also based on Gecko. In my case, I am building an Electron app, which uses Chromium, which is based on WebKit. Browser support is not one of my problems, but it may be yours.

          You can check an example of side-by-side table and scroll area and their scrollbars here

          To Quasar team members: While my solution works (sort of) for QTable, I would have to replicate the styling for wherever else a scrollbar appears. It would be really nice if you would have a consistent way of handling scroll bar styling.

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