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

Autocomplete list open upwards when at the edge of the page #158

Closed
cedbesafilm opened this issue Dec 18, 2020 · 4 comments
Closed

Autocomplete list open upwards when at the edge of the page #158

cedbesafilm opened this issue Dec 18, 2020 · 4 comments
Labels
enhancement New feature or request

Comments

@cedbesafilm
Copy link

cedbesafilm commented Dec 18, 2020

Is your feature request related to a problem? Please describe.
Now the autocomplete open downwards in evey situation, on mobile the user can not notice the list open

Thoroughly Describe the solution you'd like
if the autocomplete is open at the lower limit of the page the list should open upwards

Please provide a few use cases for this feature

  1. on mobile the user can not notice the list open

Please Describe alternatives you've considered
For now i'm studing a custom method when list renders

Additional context
current behavior
image

image

expected behavior
This is and example take from a Select
image

@cedbesafilm cedbesafilm added the enhancement New feature or request label Dec 18, 2020
@cedbesafilm
Copy link
Author

cedbesafilm commented Dec 18, 2020

MY WORKAROUND

Pieces of code taken from ChoicesJS

Javascript

I use rendered event because in resultsList the property bottom is always 0 (maybe is not injected in the DOM already?)

      i.addEventListener("rendered", function() {
        var shouldFlip = false;
        var el = document.getElementById("autoComplete_list");
        var dropdownPos = el.getBoundingClientRect().bottom
        
        shouldFlip = !window.matchMedia("(min-height: " + (dropdownPos + 1) + "px)").matches;

        if (shouldFlip) {
          el.classList.add("is-flipped");
        }
      }, false);

CSS

#autoComplete_list.is-flipped {
  top: auto;
  bottom: 100%;
  margin-bottom: 0rem;
}

VISUAL

On lower edge
image

@mits87
Copy link

mits87 commented Mar 2, 2021

Also I have the same problem. Would be good if the plugin will support that out of the box

@edj56
Copy link

edj56 commented Mar 2, 2021

Hello :) Yes, it would be great to have this feature, please take a look

@amiregelz
Copy link

@TarekRaafat Is there a way to always open the dropdown upwards? trying to figure out what CSS to apply

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants