Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

QSelect taking all the height available in desktop when there are too many items in options #16072

Closed
dev-rfc opened this issue Jul 13, 2023 · 7 comments
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@dev-rfc
Copy link

dev-rfc commented Jul 13, 2023

What happened?

After upgrading from 2.12.0 to 2.12.2, the QSelect was affected, it currently fills all the space on the screen when opening and having too many items in options.

bug

What did you expect to happen?

It should open and retrains it from occupying all the space on screen

fix

Reproduction URL

https://codepen.io/renan-cavalieri/pen/rNQJxbp

How to reproduce?

  1. Open the reproduction link on desktop
  2. Open the QSelect component.
  3. The issue should be visible, like in the screenshots.
  4. If you need to compare to the previous behavior, check this link instead: https://codepen.io/renan-cavalieri/pen/KKrQVLW

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

There is no need, it's reproductible even in browser using UMD.

Relevant log output

No response

Additional context

No response

@dev-rfc dev-rfc added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Jul 13, 2023
@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite labels Jul 13, 2023
@dev-rfc dev-rfc changed the title QSelect taking all the height available in desktop QSelect taking all the height available in desktop when there are too many items in options Jul 13, 2023
@binarytide
Copy link

possibly consider options-max-height as a param?

@dev-rfc
Copy link
Author

dev-rfc commented Jul 29, 2023

could be, but that's not the expected behavior, as it's probably a regression that happened between 2.12.0 and 2.12.2.

@metalsadman
Copy link
Member

metalsadman commented Aug 28, 2023

I think this change did it back in 2.12.1 c9e43fa#diff-d486fe7e47b9fce07ab2252caf361429f339596767385dfdd8b53da0c72150b6R174 which was to fix (#11247), so even if you set popup-content-style="max-height: 65vh;" it will get overridden by 100vh or with the computed maxHeight when the engine recalculates.
https://codepen.io/metalsadman/pen/KKbVqVZ?editors=1010
default max-height per qmenu's css is 65vh
q v2.12.1
image
q v2.12.0
image

@SeverinSenn
Copy link

Just out of curiosity, did anyone find a solution to this problem?

@stijnelskens
Copy link

Any solutions for this? I'd like to keep a max-height without it gets overwritten.
As an fixed height is no solution for this..

@stijnelskens
Copy link

A possible workaround is adding popup-content-class="max-height-dropdown" and define the class with max-height: 40vh !important;. As this doesn't get overwritten. So this is a temporary solution..

@SeverinSenn

rstoenescu added a commit that referenced this issue Sep 12, 2024
…ride max-width/height set in CSS for QMenu/QTooltip; new Quasar CSS vars: $menu-max-height, $tooltip-max-width, $tooltip-max-height #16072
@rstoenescu
Copy link
Member

Fix will be available in Quasar v2.17.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

6 participants