QScrollArea - Thumb style positionning ignored (v2.17)

[AxelMolina1]

What happened?

Since the version 2.17, in some cases when we specify position in the thumb style, the positionning doesn't apply which result in an offset between the two elements.

For vertical thumb style, we cannot use top and right CSS properties And for horizontal thumb style, we cannot use bottom and left

It doesn't work because it seems that those properties are forced to 0px even if we specify !important

For example : When setting right to 3%

The vertical bar is overriding it to 0px

And for the horizontal bar, the 3% are applied but we see the bottom and left properties set to 0px as explained before

What did you expect to happen?

I expect the thumb-style property of q-scroll-area to apply correctly positionning properties, like it used to on version <2.17 of quasar

Reproduction URL

https://codepen.io/AxelMolina1/pen/vYoWxNJ https://quasar.dev/vue-components/scroll-area/#scroll-event

How to reproduce?

1. Go to the provided reproduction URL
2. Scroll up and down
3. See the active bar offset with its container

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[bake09]

Any Progress on This. The Right prop have no effect yet. The Thumbsalways sticks right to the edge.

You can See this on Chrome Windows in the Docs...

[AxelMolina1]

6 months later, still no news..

[AxelMolina1]

Based on commit history to the QScrollArea.js file, compared with versions, it seems the bug has been introduced on one of these three commits :

• https://github.com/quasarframework/quasar/commit/e3118f78e133952dc29716946eb34d8dac6e413d @thexeos
• https://github.com/quasarframework/quasar/commit/be9133f82439a5799a31ba6529bd73c87b443b0a @rstoenescu
• https://github.com/quasarframework/quasar/commit/c310cb8e4ffa74d3d0ae6ad023032142518aa7e7 @rstoenescu

I am not familiar with Quasar code so I am having difficulties to find the exact moment this bugged was introduced

[thexeos]

I can confirm it was introduced in https://github.com/quasarframework/quasar/commit/c310cb8e4ffa74d3d0ae6ad023032142518aa7e7

@rstoenescu I see two fixes for this:

Basic

Move the offset parameter to before ...props.thumbStyle, ...props.verticalThumbStyle, allowing user to override the computed styles for right/bottom offset.

    scroll.vertical.style = computed(() => ({
      right: `${ props.horizontalOffset[ 1 ] }px`,
      ...props.thumbStyle,
      ...props.verticalThumbStyle,
      top: `${ scroll.vertical.thumbStart.value }px`,
      height: `${ scroll.vertical.thumbSize.value }px`
    }))

Advanced

Detect when user is providing right/bottom offset in props.thumbStyle or props.verticalThumbStyle and then use calc() to compute a combined value while keeping the overscrolling functionality intact.

    scroll.vertical.style = computed(() => ({
      ...props.thumbStyle,
      ...props.verticalThumbStyle,
      top: `${ scroll.vertical.thumbStart.value }px`,
      height: `${ scroll.vertical.thumbSize.value }px`,
      right:
        props.thumbStyle.right || props.verticalThumbStyle.right
          ? `calc(${ props.thumbStyle.right || props.verticalThumbStyle.right } + ${ props.horizontalOffset[ 1 ] }px)`
          : `${ props.horizontalOffset[ 1 ] }px`
    }))

[rstoenescu]

The docs examples were slightly out of date. Please do not use right/top css in the style props, but rather use the specific horizontal/vertical-offset props instead.

[AxelMolina1]

@rstoenescu the solution you mentioned only moves the thumb and not the bar if I understand it correctly.

The doc examples have been updated and it seems to work but it actually don't because it seems everything is perfectly in balance so it is aligned but if we just increase the horizontal-offset it shows the problem again (https://codepen.io/AxelMolina1/pen/azvrLqg).

And by using the horizontal-offset, if I'm correct, we're forced to use pixels

[AxelMolina1]

Hello could you help with the response I made please? @rstoenescu

[rstoenescu]

Just to be extra clear on all my previous explanations: For the vertical & horizontal thumb, do not use right/left props, but vertical-offset and horizontal-offset props. These two props apply ONLY for the thumb (as also indicated in the QScrollArea API card on docs). However, you can still use the right/left/whatever css props for the bar, which will actually be needed for you to perfectly place it under the thumb. We cannot auto-account for all use-cases for the bar (through the offset props) so manual css is needed for it.

Example with "right" css prop added to the bar: https://codepen.io/rstoenescu/pen/pvgrZgM