Skip to content

How to float ontop of content beneath? #15

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
kevinsimper opened this issue Aug 22, 2016 · 15 comments
Closed

How to float ontop of content beneath? #15

kevinsimper opened this issue Aug 22, 2016 · 15 comments

Comments

@kevinsimper
Copy link

Right now my app looks like this and I can't seem to understand how to make it float ontop like yours demo!

Is it possible? Btw, thanks for the library!

image

@kevinsimper
Copy link
Author

I got it to look like this with position relative and absolute:
image

@mrlaessig
Copy link
Collaborator

If the relative position solution works out for you I will close this issue.

@kevinsimper
Copy link
Author

@l-urence Yeah, but the gif in the readme looks like it is floating, is it? How did you do it?

@mrlaessig
Copy link
Collaborator

No, the example autocomplete container position is absolute.

@kevinsimper
Copy link
Author

@l-urence Would it be an idea to put that into the module? Because it does not really make sense without :)

@mrlaessig
Copy link
Collaborator

@kevinsimper Actually this is true! But right now I didn't figure out how to to this in a good way (lack of time). The absolute position seems to be more some kind of "hack" to put the suggestion list on top of other elements. For that reason I excluded the positioning to the example. An optimal solution would be to add the autocomplete like the <TextInput /> to a component and the suggestion list will appear over other elements. Without strange behaviours which could happen if you set it to an absolute position.

@kevinsimper
Copy link
Author

@l-urence Yeah, I can see what you mean, but I think that is better than the current behaviour.

@mrlaessig
Copy link
Collaborator

@kevinsimper I will have a look at the weekend.

@mrlaessig
Copy link
Collaborator

@kevinsimper I prototyped a fix for the absolute position. Can be installed via npm. Short feedback would be nice. Thx.

@kesha-antonov
Copy link
Contributor

@l-urence Hello!
Just tested it. Looks good! 👍

@mrlaessig
Copy link
Collaborator

@kesha-antonov Great :). Will publish everything ASAP.

@tioback
Copy link

tioback commented Sep 15, 2016

The fix didn't work for me in Android, but iOS works fine, as in images below.

screen shot 2016-09-15 at 19 52 59

screen shot 2016-09-15 at 19 53 16

@mrlaessig
Copy link
Collaborator

mrlaessig commented Sep 19, 2016

The Android issues seems to be related to #20.

@tioback
Copy link

tioback commented Sep 26, 2016

I managed to get it working with a different approach. Thanks, anyway.

@mrlaessig
Copy link
Collaborator

@tioback Thanks for sharing you approach. Maybe I can integrate some of your ideas into the component.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants