Quasar: QSelect menu gets cut off if using it within an overflow hidden parent

[stefanvanherwijnen]

Software version

Quasar v1 beta1

JsFiddle

https://codepen.io/stefanvh/pen/MLBbzZ

What did you get as the error?

The popover is hidden because it is contained within the QDialog viewbox. The popover seems to be scrollable in this case, but that also does not work like it should (can't scroll up).

What were you expecting?

It should be visible, probably by not containing the popover inside the QDialog.

What steps did you take, to get the error?

[pdanpdan]

Thank you for reporting - we'll try to find a way to solve it.

[labs20]

Same goes to q-expansion-item

[kevingermain]

Should be a priority issue :)

[rstoenescu]

This is on the radar, yes.

[diegomagikal]

The same with q-tab-panels, q-tabs and q-card ([email protected])

https://codepen.io/diegomagikal/pen/daBPoj

[dmig]

I faced this issue recently. My proposal for a quick fix is: add QSelect option to limit the number of dropdown list elements.

[topeysoft]

I have the same issue. For temporary fix, I added the following css:

.q-dialog {
    .q-dialog__inner > div {
        overflow: visible;
    }
}

[lucasfernog]

The same with q-tab-panels, q-tabs and q-card ([email protected])

https://codepen.io/diegomagikal/pen/daBPoj

The same with QTable (opening a QSelect changes de height of the table... maybe the popup container should be something else)

https://codepen.io/anon/pen/bZqxwv?editors=1010

[rstoenescu]

We are aware and we will fix it.

[sskwrl]

Just because it hasn't been mentioned explicitly and I just ran into it.
q-stepper -> q-step -> q-select has same/similar issue. It shows the entire list but it changes the size of q-step and adds a scroll bar to q-step to be able to see the options when expanded instead of popping over the rest of the q-stepper and adding a scroll bar to the options list if needed.

https://codepen.io/skwrl/pen/KEZLrQ?&editable=true&editors=101

[pappascd]

The same with q-tab-panels, q-tabs and q-card ([email protected])
https://codepen.io/diegomagikal/pen/daBPoj

The same with QTable (opening a QSelect changes de height of the table... maybe the popup container should be something else)

https://codepen.io/anon/pen/bZqxwv?editors=1010

I was lazy and just modified this, but the same thing happens with q-tab-panels, q-tabs, and the pagination drop-down menu.

https://codepen.io/anon/pen/MxMjBZ?editors=1010

[rstoenescu]

Fix will be available in beta.14

[rstoenescu]

Delaying this a bit. Not yet "production ready". Didn't went into beta.14.

[Hamdan85]

@rstoenescu just quoting @sskwrl , it's still happening on QStepper on beta15.
Thanks in advance man!

[rstoenescu]

@Hamdan85 hi, yes, which is why I haven't closed this issue and not told in which version the fix is available.

This is not as easy as it might seem, but it's currently 95% done, so there are high chances of this getting into beta.16. Will post updates and close this ticket when we get to 100%.

Thanks for your patience. This is not as easy as it may seem.

[Hamdan85]

@rstoenescu im not complaining... lol... and I know that it's not simple as it seems, i tried to fix it lol
You guys are doing an amazing job. I just hated the new QDate but Ill get use to it like I did with the latests versions lol... I have ZERO complaints about quasar team or product. Keep the good work and count on me when I get pro enought to help as I do in Rails comunity.
cya ;)

[mam-ijinus]

I just hated the new QDate

check this: https://www.npmjs.com/package/quasar-app-extension-qdatetimepicker

[Hamdan85]

lol @mam-ijinus it is from tobias... i tried to use but it's still in development.

[rstoenescu]

Fix available in beta.16.

[Hamdan85]

@rstoenescu I was even considering inform you on discord, but since this was still opened, I didnt, but the problem is still happening within q-tabs

[rstoenescu]

@Hamdan85 Make sure you're using Quasar beta.16 (not @quasar/app, but quasar package).

[Hamdan85]

@rstoenescu lol.. my bad.
but it's still measuring height questionably. The overflow problem is fixes but the dropdown is still bigger than the screen forcing me to force an height override

[rstoenescu]

@Hamdan85 codepen pls?

[kimini507]

Hi @rstoenescu just wanted to report some weird bug (should I open a new issue for this)

Issue
Popover for q-select jumps to top items on hover of bottom items when there is a scroll
So I can't really select the last items

CodePen
https://codepen.io/kimini507/pen/ROLxKK

Version
beta .16

[rstoenescu]

@kimini507 Already reported. Already fixed. Will be available in beta.17 (to be released today or tomorrow).

[kimini507]

Thanks @rstoenescu