Scrollbar disappears when focused

  • Having a weird problem…
    I have a complex app with left and right drawer, and tabbed section in the center. Each tab panel has a toolbar (and possibly a bottom bar) and knows its current height. So it has a q-scrollbar-area with the height set to vertically scroll content between the toolbars.
    It all works perfectly EXCEPT…
    When the left drawer is in overlay mode on a narrow window, if I mouse over the scrollbar, it disappears! Scrolls fine using the mouse wheel, but not possible to click or drag on the scrollbar itself. If the window is wide enough that the left drawer is not in overlay mode, all works fine.

    I’ve been tearing what little hair I have left out all day but not getting anywhere.

    Note: I tried to build a codepen to show this, but it doesn’t work. Sorry.

  • More info…
    Not related to whether drawer is overlay or not - just depends on window width. If less than 1284 px, scrollbars disappear when moused over. Any clues why this would be??

  • @CWoodman

    As you already said, without some code it will be hard to solve this one. The 1284px sound like some arbitrary number ( if you use quasar’s default breakpoint values):

    If you can’t make a codepen the only thing I can think of is to make a repo/zip of the code and I could take a look at it tomorrow. (you can PM me if you’re willing)

  • @CWoodman fork the sandbox as it’s more identical to your project folder then paste related code there according to your issue, be sure it reproduces what your issue tho. some issues are best shown with a reproducible code along with your explanation, so please do make effort to produce one, if you want peeps to help you efficiently.

    Same, if you are certain that it’s a bug after some testing, include the reproduction along with your ticket.

  • OK, I’ll have a look at sandbox. Thanks.

  • @metalsadman
    OK, I made a sandbox example. I stripped down my app to the essentials to show the problem. In the process I learned something that may be helpful.
    First a little explanation of the app…
    It has a top toolbar, left and right drawers and central ‘work section’ which contains a tabstrip and tabpanels. The real app is more complex with option to have both vertical and horizontal splitter in the work section, with separate tab strips in each. Tabs are dynamically created and managed by a vuex store, and a tab can be dragged from one splitter pane and dropped into another.
    I’ve removed all that complexity from the example, but this might help you understand why it’s structured the way it is.

    So, if you play around with the width of the browser, you can see that the scroll bar disappears when you mouse over it if the window is less than a certain size. (484 px).

    Interestingly, I discovered that if you comment out the right drawer code in MainLayout.vue, the problem goes away. I commented out the left drawer already, but it doesn’t seem to make any difference to the problem.

    Here’s the code…

    Please note: This is my first Quasar venture, and I’ve jumped in with both feet because I need a complex app, but you will probably see all kinds of things I’ve done wrong or badly. Any constructive criticism will be welcome.

    As always, I really appreciate your help.

  • @CWoodman I found the error. Quasar drawers by default have a swipe open feature, which puts a 15px area along the right side of the screen that you can swipe on. That 15px area is actually covering the scrollbar at a higher z-index, so when you mouse over that area, your mouse is no longer over the scroll area, thus it disappears.

    The simplest fix would be to add no-swipe-open to your q-drawer in MainLayout.vue. However, maybe someone has a better fix? I’m not sure that both elements that are overlapping (the invisible drawer margin and scrollbar) can respond to the same event though.

    Edit: btw, I found that by simply using inspect element to check that area:

  • @beets Wow good detective work! Thanks so much for figuring it out, and explaining so clearly.

  • Another question - using the same sandbox to demonstrate…
    If the height of the window becomes smaller than a certain size, a superfluous scrollbar appears on the far right side. How can I suppress that? I’ve tried putting ‘class="no-scroll’ in many different places but with no effect.
    If I change the WorkSection.vue main-container div to ‘style="height: 80vh’ instead of ‘90vh’, it gets rid of the scrollbar, but then the panel doesn’t fill the page.

    Here’s the code…

  • @CWoodman Try this:

    I wish codesandbox had a diff view to compare to your original one. I removed all the JS width/height watchers and props, and instead used flexbox + other css positioning classes.

          <div id="main-container" class="absolute-full">

    Here, set main-container to absolute-full, which will fit exactly the q-page, and take advantage of Quasar’s built in min-height calculation.

      <div class="column full-height">
          class="tab-strip-style col-auto"
        <q-tab-panels v-model="selectedTab" class="col">

    Here, I used a flexbox column, set the tabs to col-auto (shrink to fit) and the tab panel to col (grow to take up remaining area.

     <div class="column full-height">
        <div class="bg-blue-grey-2 q-pt-sm col-auto" style="height: 50px">
        <q-scroll-area class="col">

    Same thing as above, let the tab content take the full height and use flexbox to calculate sizes.

    The original problem was that your q-page content was taller than the actual element, causing the main scrollbar. This sort of thing gets tricky when you want to avoid it, I’ve ran into basically the same problem before.

    Flexbox can solve this, with the added benefit of a CSS only solution, which will have better performance.

    Edit: I also added a body { overflow: hidden } in mainlayout and the same with a css class in Tab1 / Tab2 to prevent temporary scrollbars when resizing the window.

  • @beets Thanks! That really simplifies things, and fixes the problem.
    Now, will it work with splitters? I’ll try adding them to my code and see.

  • @beets Before adding splitters, I tried putting a table in one of the tabs.
    Having some problems:

    1. I’d like the table footer to always be at the bottom of the tab panel. In my original code, I used the passed down height prop to accomplish this, but we’ve removed all those now.
    2. For some reason, when the panel height gets too small, the table moves beside the top ‘toolbar’ div instead of under it.
    3. When the panel width gets too small, a scrollbar appears on the far right, and will scroll the tabstrip off screen.

    Need to fix these before I add splitters. Can you help?

  • @CWoodman Maybe this is a bit closer to what you want?

    I had to put a few full-width, full-height, and no-wrap classes to some of the divs.

  • Works great! Now to try adding splitters. Stay tuned.

  • @CWoodman You are always up to some complex UI problems. You’re building an ide? 🙂

  • @dobbel No, not an IDE - just a complex web app to replace an old VB desktop app.
    Very rusty on Javascript, and totally new to Vue and Quasar, so having lots of fun. Really appreciate the help you guys give me!

  • @beets Works great with splitters too!
    Had to get the height for the splitter, but seems no need to pass it down as a prop to components.

    Thanks for the great help! I’m having fun, but would be lost without you guys.

  • I had a different problem and posted a separate topic, but we can use the same sandbox to demonstrate here.
    Question is how to build responsive columns when the component is in a splitter?
    See Tab3 in the following…

  • I found a solution - instead of using class=“col-12-sm col-6” I can just use “col-auto”. Need to read the docs more!

Log in to reply