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

    Scrollbar disappears when focused

    Help
    5
    33
    1262
    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.
    • dobbel
      dobbel @CWoodman last edited by

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

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

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

        1 Reply Last reply Reply Quote 0
        • CWoodman
          CWoodman @beets last edited by

          @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.

          https://codesandbox.io/s/scrolltest-with-tabs-87ylg

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

          1 Reply Last reply Reply Quote 0
          • CWoodman
            CWoodman last edited by

            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…
            https://codesandbox.io/s/scrolltest-with-tabs-87ylg?file=/src/components/workPanels/Tab3.vue

            beets 1 Reply Last reply Reply Quote 0
            • CWoodman
              CWoodman last edited by

              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!

              beets 1 Reply Last reply Reply Quote 0
              • beets
                beets @CWoodman last edited by beets

                @CWoodman That part is a bit trickier, since as far as I know, there isn’t someway to be responsive to the parent. But, here’s how it can be accomplished: https://codesandbox.io/s/scrolltest-with-tabs-forked-xynwk

                What I did was, first put a resize observer in the main tab content. This observer calls the onResize method and tells us the size of this tab / panel.

                    <q-resize-observer @resize="onResize" />
                

                In the script portion, we store the size, and also loop through the built-in quasar breakpoints and return our size as a string xs, sm, md, etc.

                <script>
                export default {
                  data() {
                    return {
                      width: 0,
                      height: 0
                    }
                  },
                  methods: {
                    onResize(size) {
                      this.width = size.width
                      this.height = size.height
                    }
                  },
                  computed: {
                    size() {
                      for (const breakpoint of Object.keys(this.$q.screen.sizes).reverse()) {
                        // loop through breakpoints, starting with highest first
                        const minWidth = this.$q.screen.sizes[breakpoint]
                        if (this.width > minWidth) {
                          return breakpoint // returns sm, md, lg, xl
                        }
                      }
                      return 'xs' // if no match, then we are at xs
                    }
                  }
                }
                </script>
                

                We then bind that as a class, so we get something like size-md

                    :class="`size-${size}`"
                

                Finally, a few styles to override the size:

                <style scoped>
                .size-xs .col-12 {
                  width: 100%;
                }
                .size-sm .col-12,
                .size-md .col-12,
                .size-lg .col-12,
                .size-xl .col-12 {
                  width: 50%;
                }
                </style>
                

                Note, that I removed the other classes other than .col-12 on the tables, and explicitly set the width for all breakpoints higher than xs. Depending on how many different col-* classes you use, you probably don’t need a ton of overrides. Alternatively if you plan to use many col-* classes, you could even copy all the Quasar col-* definitions and wrap them around the size-* class in addition to the css media queries.

                CWoodman 1 Reply Last reply Reply Quote 0
                • beets
                  beets @CWoodman last edited by

                  @CWoodman said in Scrollbar disappears when focused:

                  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!

                  Just read this answer after I typed mine. That seems like it would work too, unless you need exact widths. Glad it’s all coming together!

                  1 Reply Last reply Reply Quote 0
                  • CWoodman
                    CWoodman @beets last edited by

                    @beets Sounds complicated. But just using ‘col-auto’ seems to make it responsive without having to worry about where the breakpoints are.

                    That’s a pretty simple case I know - will have to play around with more complex forms and see what works. Might need your suggestions.

                    In general, I’m finding splitters make life a lot more complicated, but I think users will need to be able to view several different things at once.

                    Thanks again.

                    beets 1 Reply Last reply Reply Quote 0
                    • beets
                      beets @CWoodman last edited by

                      @CWoodman You’re welcome. At some point once you get more familiar with Vue, you can actually abstract these tabs / views / tables into Vue components, and be able to more easily re-use them. But I’m always an advocate for using what works now instead of overcomplicating things. This sounds like a pretty fun app to re-write and help you learn the ropes.

                      CWoodman 2 Replies Last reply Reply Quote 0
                      • CWoodman
                        CWoodman @beets last edited by

                        @beets Yeah, everything that goes in a tab is a component now. I also built a few widgets I need, including one I call TreeSelect which combines a q-select, q-input and q-tree to make a select widget that shows a tree-structured drop-down and responds to auto-typing. I’m rather proud of that one, though I probably did things the hard way not knowing any better.

                        Anyway, Quasar is great and I really appreciate the support.

                        1 Reply Last reply Reply Quote 1
                        • CWoodman
                          CWoodman @beets last edited by

                          @beets I’m trying to incorporate the changes you showed me into my real app, but having a weird problem…
                          I start out the component like this:

                          <template>
                            <div class="column full-height full-width overflow-hidden">
                          

                          Then there’s a toolbar, and then I have:

                          <q-scroll-area class="col">
                          

                          Followed by a whole bunch of stuff. But when I inspect the elements, the top div height is only enough to hold the toolbar, and the scroll area height is 0. Mouseing over elements highlights where they should be in the window, but nothing is showing. Any idea why this would be?

                          Here’s a screenshot:
                          InvisibleElements.png

                          beets 1 Reply Last reply Reply Quote 0
                          • Hawkeye64
                            Hawkeye64 last edited by

                            @CWoodman QScrollArea needs width and height defined in your styles. Alternatively, you can also do this for a parent and then use “fit” class (same as full-height + full-width).

                            1 Reply Last reply Reply Quote 0
                            • beets
                              beets @CWoodman last edited by beets

                              @CWoodman I think the problem is up a component or two, start from q-page, and inspecting each child element, see which one is no longer fitting the whole page area. On that element, you may try to add absolute-full. Specifically, check WorkSection and WorkTabs as I made some changes there too. Edit: also check the mainlayout file, there were some changes I made there too.

                              CWoodman 1 Reply Last reply Reply Quote 0
                              • CWoodman
                                CWoodman @beets last edited by

                                @beets Found the problem - I wasn’t setting the splitter height correctly. All seems to be working!

                                I really like the trick you showed me of using <q-scroll-area class=“col”> instead of having to know its height. But I don’t understand why this works. Doesn’t seem to be in the docs anywhere. Can you explain? Is this safe, or is it a kludge that may not work in future?

                                1 Reply Last reply Reply Quote 0
                                • Hawkeye64
                                  Hawkeye64 last edited by

                                  @CWoodman It’s a flex thing. row stretches by width, col stretches by height.

                                  1 Reply Last reply Reply Quote 0
                                  • CWoodman
                                    CWoodman last edited by

                                    Well it sure beats having to know the height for a scroll-area. I would suggest putting an example in the docs. I wasted a week building a setup which passed height prop down through several levels to get the scroll area to work in a tab panel within a tab strip within a splitter. It’s so much cleaner with class=“col”! Without @beets help I’d still be struggling with it.
                                    I sure appreciate all the help I get here - you guys are great!

                                    beets 1 Reply Last reply Reply Quote 0
                                    • beets
                                      beets @CWoodman last edited by beets

                                      @CWoodman As hawkeye said, it’s a flexbox utility class. Take for example a .row. That’s a flexbox container that has children arranged horizontally. The children can have classes like .col-auto, .col-4, or .col.

                                      .col-auto takes up the smallest amount of space possible.

                                      .col-4 takes up 33% of the width.

                                      .col takes up any remaining space.

                                      If you switch .row to .column, we still have a flexbox container, but the children are arranged vertically. The only difference is that by default a <div> has a width of 100%, but a height of 0px. So you need some way to set the height of the container .column. That’s where classes like .absolute-full or .full-height come in to play.

                                      You probably get a better understanding of this by setting up a blank project and first make a .column class that has a fixed height, like 800px. See how children .col-* classes take up space, then change the fixed height to be .absolute-full and you pretty much have how all the tricks were accomplished.

                                      Edit: I should add, there’s a lot more to flexbox, such as column wrapping, setting nowrap, etc. It takes a bit to get a good understanding of it all. The Mozilla docs are a good place to get an official understanding of them, and Quasar docs for the quasar specific classes (which makes things much easier to work with)

                                      https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

                                      1 Reply Last reply Reply Quote 1
                                      • CWoodman
                                        CWoodman last edited by

                                        I’ve used rows and cols with Bootstrap, but seems there’s lots more to flex that I need to understand.
                                        Thanks again for your help and patience.
                                        BTW, my app is working fine now with scrollbars when needed, and no superfluous ones.

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