No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Autocomplete Popover Issue

    Help
    autocomplete issue popover
    3
    17
    5386
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      guidoec last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • G
        guidoec @rstoenescu last edited by

        @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.

        0_1487719387991_Captura de pantalla (10).png

        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.

        1 Reply Last reply Reply Quote 0
        • rstoenescu
          rstoenescu Admin last edited by

          Care for this quick PR? Need some help as I’m overloaded with work.

          1 Reply Last reply Reply Quote 0
          • G
            guidoec last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • rstoenescu
              rstoenescu Admin last edited by

              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.

              1 Reply Last reply Reply Quote 0
              • G
                guidoec last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • G
                  guidoec last edited by

                  This post is deleted!
                  1 Reply Last reply Reply Quote 0
                  • s.molinari
                    s.molinari last edited by

                    @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

                    1 Reply Last reply Reply Quote 0
                    • G
                      guidoec last edited by

                      @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!

                      1 Reply Last reply Reply Quote 1
                      • G
                        guidoec last edited by

                        Pull Request done: https://github.com/quasarframework/quasar/pull/413

                        1 Reply Last reply Reply Quote 1
                        • s.molinari
                          s.molinari last edited by s.molinari

                          Great! Thanks for the contribution! 👍

                          Scott

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post