search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.71k stars 3.49k forks source link

QSelect scrollbar not styled #17360

Open meatfighter opened 1 month ago

meatfighter commented 1 month ago

What happened?

If the dropdown of a QSelect is too tall for its container, a scrollbar appears. But the scrollbar is not styled. It looks generic.

https://codepen.io/Michael-Birken/pen/RwzwXxv?editors=101

image

What did you expect to happen?

The QSelect menu scrollbar should look like it does in the Quasar Framework docs:

https://quasar.dev/vue-components/select

image

Reproduction URL

https://codepen.io/Michael-Birken/pen/RwzwXxv?editors=101

How to reproduce?

  1. Go to https://codepen.io/Michael-Birken/pen/RwzwXxv?editors=101
  2. Narrow the height of the browser to force the QSelect menu to manifest a scrollbar.
  3. Observe the scrollbar's sytle.

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Microsoft Edge

Quasar info output

No response

Relevant log output

No response

Additional context

The same thing happens to a QDialog if it is too tall. A scrollbar appears on its right. But that scrollbar is not properly styled either.

https://codepen.io/Michael-Birken/pen/GRbRVQL?editors=101

image

RamonDonadeu commented 1 month ago

That is because the quasar docs have styled the scrollbar.

https://codepen.io/Michael-Birken/pen/RwzwXxv

meatfighter commented 1 month ago

That is because the quasar docs have styled the scrollbar.

https://codepen.io/Michael-Birken/pen/RwzwXxv

Why doesn't Quasar do that? How did the docs style it? Can I add that to my Quasar project in a way that works across browsers?

RamonDonadeu commented 1 month ago

https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Check this webpage for Chrome, Edge, Safari and Opera. For firefox it changes but you can find it easy probably

RamonDonadeu commented 1 month ago

Oops i just realized that i didn't paste my codepen

https://codepen.io/RamonDonadeu/pen/GRbpQMa

That is because the quasar docs have styled the scrollbar.

https://codepen.io/Michael-Birken/pen/RwzwXxv

meatfighter commented 1 month ago

Oops i just realized that i didn't paste my codepen

https://codepen.io/RamonDonadeu/pen/GRbpQMa

That is because the quasar docs have styled the scrollbar. https://codepen.io/Michael-Birken/pen/RwzwXxv

Thanks for suggestions. But I don't think that works across browsers, particularly Firefox. More importantly, Quasar should do this out of the box, which is why I filed this bug report.