Autocomplete Popover Issue
-
Okey. I will do that. Now I didn’t found what it’s cussing it yet. But there are props delcleared in the auto complete component over the popover that do not belong to the popover component itself. I will fork and clone the repo and try it out.
-
@rstoenescu I found the issue. The problem was that I was giving the “.list” class a height of 100vh. Because of this, don’t know really why, de popover loses it’s anchor.
This also happens in your popover example with the “assignment” button.
In your example the the list displays a 20 elements and with a max-height of 500px. If you shorten the list to, for example, 2 elements the popover won’t lose the anchor. Also if you change the max-height to something like 200px you can preserve the amount of elements in the list without loosing the anchor for the popover.
Conclusion, big heights breaks the anchor position for the popover. Temporary fix? I think that setting the max-amount displayed to 3 or 4 elements in the autocomplete or giving a max-height of 200/300px to the list container inside the popover in the autocomplete component could solve it.
-
Care for this quick PR? Need some help as I’m overloaded with work.
-
Sure no problem. I will make a PR to give all popovers a standard height so there is no conflict with any popover triggered. As soon I can I will make the request.
-
Hmm, not for all popovers. Rather for autocomplete only… but for the autocomplete you got the max results to be shown option… let me ponder on this better. Also, the datetime input component uses popovers; one with date and time together can be quite large in height.
-
Hmmm I checked the date time component and the popover also has this issue. Losses anchor and gets positioned to top and not to the triggering element. I solved nesting the <slot> in the popover component with a div of max-height 50vh (it seems that it is not possible to bind styles to slots yet in vue). I will PR now so you can check it out. I think it’s a quick easy fix.
-
This post is deleted! -
@guidoec - is this relevant? https://forum-archive.vuejs.org/topic/1316/how-can-i-properly-bind-a-class-to-the-slot/3
Also, please link the PR here if you could. I am, and I am sure others finding this thread would be, interested your the solution.
Scott
-
@s-molinari that is what I actually did, I have already seen that thread. But thanks for helping
You cannot modify the slot, you have to wrap it with another element, a div for example.
Now I am actually traveling. So as soon as I get good internet I’ll push my changes to the fork and ask for a PR. I will link it here.
Thanks again!
-
Pull Request done: https://github.com/quasarframework/quasar/pull/413
-
Great! Thanks for the contribution!
Scott
