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

wacky search placement #216

Closed
npfoss opened this issue Apr 26, 2019 · 10 comments · Fixed by #258
Closed

wacky search placement #216

npfoss opened this issue Apr 26, 2019 · 10 comments · Fixed by #258
Assignees
Labels
bug Something isn't working p1 very high priority p2 high priority

Comments

@npfoss
Copy link
Collaborator

npfoss commented Apr 26, 2019

On the dev site (the errors are unrelated, mentioned in #215):
image

On localhost (note the offset):
image

They both went away upon resizing the screen.

The offset happens when you reload with inspect element open, but I have no idea how to reproduce the first one..

@npfoss npfoss added bug Something isn't working p2 high priority labels Apr 26, 2019
@georgiashay
Copy link
Collaborator

I am updating positioning on resize. Does opening inspect element not trigger window.resize?

@npfoss
Copy link
Collaborator Author

npfoss commented Apr 27, 2019

It's if inspect element is already open when I reload. It does the right thing on page resize, including resize caused by opening that.

@georgiashay
Copy link
Collaborator

The search also scrolls with the roads, which shouldn't happen

@wishdasher
Copy link
Collaborator

Search menu scrolls with the road.

@npfoss
Copy link
Collaborator Author

npfoss commented May 4, 2019

Oh hm that's actually a big problem

@npfoss npfoss added the p1 very high priority label May 4, 2019
@georgiashay
Copy link
Collaborator

Probably better to not use jquery for positioning (seems like all errors are due to this), but not sure how to position it without placing it around the text field, which caused other problems.

@npfoss
Copy link
Collaborator Author

npfoss commented May 4, 2019

Hm ok well let's figure it out as soon as #239 goes in

@georgiashay
Copy link
Collaborator

ok i am legit so confused on this. I tried a bunch of things to get it to work without jquery with no success, so I set the jquery to update on scroll and subtract $(window).scrollTop. If I subtract 0.99 * that, it looks very close to correct, 0.999 looks closer, etc, but if I just subtract the whole thing it becomes completely off again. I have no idea what is going on but it's probably some weird javascript thing??

@npfoss
Copy link
Collaborator Author

npfoss commented May 6, 2019

hm, a) I feel like this should definitely be possible without updating on scroll and b) wtf javascript...

@georgiashay
Copy link
Collaborator

I think this might be possible with the input-activator prop. When set it uses the activator slot to determine when to open instead of v model, and also seems to position it properly. I think this would involve creating a custom component that emits an input event on both click and type. I did try something like this already but it would probably work with more tweaking.

This would break some ui stuff with the size of the input, but hopefully with the right combination of layouts and flexes it would be ok.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working p1 very high priority p2 high priority
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants