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

Container width is always set as the input width causing UI problems #102

Closed
ghiscoding opened this issue Feb 9, 2023 · 2 comments
Closed

Comments

@ghiscoding
Copy link
Contributor

Description of the problem

I'm using this lib in an open source datagrid and I render the autocomplete data that can be wider than the autocomplete input. However in the current code implementation, the autocomplete container can never be wider than the input because it is set by the library and the data end up overflowing and is not very usable as shown in the image below, it is also not easy to override because it is set directly on the input width style.

https://github.com/kraaden/autocomplete/blob/360619d94b9fd5f65554a195f66e9a8cb97e826f/autocomplete.ts#L243-L245

Proposal

A proposal could be to assign the width only via an option, something like autoDropWidth: true that could be defined as true by default, if however set to false then the lib shouldn't be assigning the width at all.

Reproduction

You can replicate this issue by going in my open source data grid here:
https://ghiscoding.github.io/slickgrid-universal/#/example12

Current Solution (very hacky)

The only solution that I found for now, which is very hacky, is to unset the width via !important on the autocomplete width property.

.autocomplete {
  width: unset !important;
}

current behavior with width being assigned input width

image

without the lib assigning width

image

@denis-taran
Copy link
Owner

Hi, you can set an arbitrary width, height and other properties for your container in the customize function:

autocomplete({
    ...,
    customize: function(input, inputRect, container, maxHeight) {
        container.style.width = '500px';
        container.style.height = '200px';
    }
});

@ghiscoding
Copy link
Contributor Author

ghiscoding commented Feb 9, 2023

ok I see, it seems to also work by assigning an empty string to unset the width like this

customize: (_input, _inputRect, container) => {
    container.style.width = '';
},

However, I would still prefer to not have to set it at all (via a flag) but if you really don't want to add a flag then I can work with that. Feel free to close the issue if you think the customize is the way to go and you don't want to add any flag

Thanks for the great lib

ghiscoding added a commit to ghiscoding/slickgrid-universal that referenced this issue Feb 9, 2023
- by default the Kraaden Autocomplete lib sets the drop container width to be the same as the input width but that isn't a good UX in a datagrid so we need to unset the width and let pure CSS use auto width
- ref denis-taran/autocomplete#102
ghiscoding added a commit to ghiscoding/slickgrid-universal that referenced this issue Feb 9, 2023
…dth (#897)

- by default the Kraaden Autocomplete lib sets the drop container width to be the same as the input width but that isn't a good UX in a datagrid so we need to unset the width and let pure CSS use auto width
- ref denis-taran/autocomplete#102
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants