Align popup better so that it is not trimmed at the right edge of the screen about autocomplete HOT 14 CLOSED

IMHO calculating CSS styles internally is a bad design choice, and not exposing those options is a bigger one.

Hey hi @dhavalgshah, thanks for the extensive feedback it's important for us. Since this issue was pretty old it's not easy to immediately get what we should do here.

Do you think you could summarise the current problem in a concrete way and propose a few solutions and implementations ideas as to fix this problem? Thanks.

from autocomplete.

That looks good to me, I'll try to work on it this week and I'll reach to you if I need any guidance.

from autocomplete.

At least definitely something we need to document. I'm used to play with margin-left: -XXXpx to align on the left but I understand it can be confusing. Regarding the auto alignment, it's not that simple because a lot of searchbars have padding, arounded corners, etc... but I get your point.

from autocomplete.

Consider this layout as an example (Docsearch search box in the top right corner): https://serge.io/ — I don't think there's a way to position this correctly using CSS-based absolute positioning, unfortunately.

from autocomplete.

Oh, you meant using margin — that would actually work. Thanks!

from autocomplete.

Oh, you meant using margin — that would actually work. Thanks!

Yes, that's the quick fix :)

But having an option (or a CSS class) letting the user decide whether it's left or right aligned by default make sense.

from autocomplete.

Hi @redox any update on this issue?

This is really a huge problem for the responsive web.

Either we should write fluid CSS and use class names to determine the view or have all the internal CSS styles that are being calculated exposed in options. Either of these approaches doesn't seem to be incompatible in either of the flavors you're offering.

Aside from one example mentioned by @iafan here are few other scenarios:

1. When you have search-input in the center bottom and want results to show above that input.
2. When search input is in either of the sides (left/right) and you want dropdown to appear beside it (left or right of the input)
3. When search input is on an overlay that takes the entire screen and you want the dropdown to align center and have a wider width.

IMHO calculating CSS styles internally is a bad design choice, and not exposing those options is a bigger one.

from autocomplete.

Would you accept a PR to integrate Popper in this library to better position the dropown?

from autocomplete.

@francoischalifour what do you think? Regarding the "next" version you're working on.

from autocomplete.

Autocomplete.js v0 (current version) is not in active development, so we won't invest much more in new features for that version. Sending a PR now won't be a great investment of your time @FezVrasta.

Integrating Popper as is in Autocomplete.js might not be a viable solution for us because we want the next version of the library to be as lightweight as possible. According to the current Popper UMD build, it would be an additional 8.2KB. We'd need to investigate to see if this size cost is justified.

In the current Autocomplete.js v1 alpha (in early development), we support this feature with the dropdownAlignment option. If ever the website imposes some CSS constraints, you can use getDropdownPosition to adjust the computed position of the dropdown on screen with JavaScript. This allows for instance to position the dropdown differently whether you're on desktop, tablet or mobile via getBoundingClientRect information.

This API is still subject to change, but in my experience that was the best compromise in terms of flexibility and bundle size. If you have time @FezVrasta, I would love it if you try this alpha version and give us feedback if this positioning API is flexible enough for your use cases. If not, we might revisit this API or consider depending on an external dependency like Popper.

from autocomplete.

My case was way trickier than the one described by OP, I had the dropdown inside a scrollable, fixed element, inside a scrollable body.

I had to change the layout of my app to make it work, but now I have this other issue where not the whole dropdown fits in the viewport and gets cut. This can be fixed with 450 bytes of custom Popper modifier.

From what I can see, @francoischalifour/autocomplete.js is 52.5 kB, so the 8 kB of popper-lite don't look too bad in my opinion, considered it would cover all the possible use cases and situations without additional maintenance required.

Alternatively, you could make Popper an optional dependency, so that who needs it can easily plug it into your code.

from autocomplete.

My case was way trickier than the one described by OP, I had the dropdown inside a scrollable, fixed element, inside a scrollable body.

By default, the next version injects the dropdown in the body, not in the search box container. Given that you can position it with JavaScript, that would be the most flexible solution AFAIK.

From what I can see, @francoischalifour/autocomplete.js is 52.5 kB, so the 8 kB of popper-lite don't look too bad in my opinion, considered it would cover all the possible use cases and situations without additional maintenance required.

As the current state, yes, because we depend on Downshift in this prototype, but we plan to get rid of this dependency when releasing stable, so size will go down.

Alternatively, you could make Popper an optional dependency, so that who needs it can easily plug it into your code.

I'm still open to suggestions because positioning is a field that remains to be explored in the next version.

At this stage, I think the best way would be to try integrating Popper to the alpha version to see if that would be a good fit. Would you like to send a PR proposal there? I can guide you through how the project works if needed.

from autocomplete.

Here's the PR:
francoischalifour#14

from autocomplete.

Autocomplete v0 has been in low maintenance mode for a few years and we just released Autocomplete v1 so I'm closing this.

Resources

• Getting Started
• panelPlacement

from autocomplete.