Scrollbar disappears when focused

dobbel

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

CWoodman

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

CWoodman

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

CWoodman

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

CWoodman

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

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

beets

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

CWoodman

@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

@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

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

CWoodman

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

Hawkeye64

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

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

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

Hawkeye64

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

CWoodman

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

@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

CWoodman

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.

No More Posting New Topics!

Scrollbar disappears when focused