search

zurb / tribute

ES6 Native @mentions
https://zurb.github.io/tribute/example/
MIT License
2.04k stars 305 forks source link

When mention container is bottom of screen positioning (bottom) is incorrect #298

Closed vick-subbu closed 5 years ago

vick-subbu commented 5 years ago

How can we reproduce this bug?

  1. Step one Go to the demo page: https://zurb.github.io/tribute/example/
  2. Step two Scroll down to a place until the traditional form elements are visible at the bottom of the page
  3. Step three Now start typing '@' you would notice that the menuContainer would be positioned incorrectly (bottom value is incorrectly calculated when top = 'auto')

What did you expect to happen? I expect the menuContainer to be positioned closer to the input or contenteditable div What happened instead? It was positioned incorrectly as shown in the attached GIF

chrome-capture

Link (jsfiddle/plunkr/codepen) or Screenshot: You can fork this Codepen as a base for reproducing your issue: https://codepen.io/mrsweaters/pen/OxxdWv?editors=1010#0

vick-subbu commented 5 years ago

Is there an easy way to change/override the position values when top='auto'; Any help would be really appreciated, this one use-case is having us blocked to go live

mrsweaters commented 5 years ago

I'm able to reproduce this, I'll have some time to look at this today. It looks like the float: right is causing an issue here.

hessellund commented 5 years ago

Is there any news on this one? This is also a blocker for us.

dessalines commented 5 years ago

I'm getting this too.

dessalines commented 5 years ago

178

dessalines commented 5 years ago

Does anyone have a temp fix for this?

sanjogs commented 5 years ago

Having the same issue, and it's blocking our go live. Any temporary fix?

mrsweaters commented 5 years ago

https://github.com/zurb/tribute/issues/318#issuecomment-530521471

mrsweaters commented 5 years ago

I'm closing this, this isn't an issue with tribute, but the way tribute is configured. Feel free to reopen if you have further issues or require further help!

dessalines commented 5 years ago

I can verify this still is failing, even when using menuContainer. If the number of menu items exceeds the bottom of the screen, it repositions the entire dropdown to the top of the page, and you have to scroll up to see it.

mrsweaters commented 5 years ago

@dessalines please share your issue in a codepen or submit a failing test.

mrsweaters commented 5 years ago

Ah, try making menuContainer relative so that absolute elements can be positioned within it. Example: https://codepen.io/mrsweaters/pen/MWgGBvo

Still, would be nice to flip the list.

aldhsu commented 5 years ago

@mrsweaters I'm not sure if I'm doing something wrong but I can't get a menuContainer with position: relative to position the menu correctly if it is not the last element. Repro: https://codepen.io/aldhsu/pen/WNeWMxm.

My hunch is this code should not add the rect.top or rect.left if the menuContainer is specified:

https://github.com/zurb/tribute/blob/a1110134b61233baf91ae38ece97f3a99b80295a/src/TributeRange.js#L480-L483

This probably needs to be documented as well. It seems unlikely that menuContainer will work properly without position: relative.

loicndjoyi commented 4 years ago

@mrsweaters I'm having the same issue. Even if the menuContainer position: relative. I was able to make it work using this body {position: relative} but i'm not sure it is the best solution. Can you tell me If there is a better one? Thank you!

mhrnik commented 3 years ago

@mrsweaters I'm having the same issue. Even if the menuContainer position: relative. I was able to make it work using this body {position: relative} but i'm not sure it is the best solution. Can you tell me If there is a better one? Thank you!

yes @loicndjoyi this is the best solution