Mention menu wrongly positioned in version 3.1.0 about tribute HOT 10 CLOSED

@BorntraegerMarc I have rolled back the positioning changes you made until we can figure out a more universal approach. Thank you everyone for reporting and tracking this issue.

If you are still seeing positioning issue please open a separate issue! Thank you.

from tribute.

@ThomHurks Thank you for reporting! Can you try to reproduce your issue in the Codepen below so I can debug it.
https://codepen.io/mrsweaters/pen/OxxdWv?editors=1010#0

from tribute.

Here you go: https://codepen.io/anon/pen/aLLMvw?editors=1010
Change the version back to 3.0.3 and you can see that it works fine.

Besides this, I noticed that on my website, the mentions window has some empty space to the left of the list elements which isn't present in the examples. I'm just using tribute as-is, with default config and no changed CSS. It seems to be caused by -webkit-padding-start: 40px; on the ul element, which is present in my Google Chrome user agent stylesheet.

Edit: ah, you're using Foundation which has padding: 0; on ul elements and then you don't get the weird empty space. So by default you're not compatible with Bootstrap. Perhaps put that CSS in your own CSS?

from tribute.

I've pushed an update in 3.1.1 that should fix your issue. Test it out and let me know if you are still experiencing issues.

from tribute.

The issue with the extra padding on the left of the list elements seems fixed. Nice! However, the mentions window is still wrongly positioned on the horizontal axis. I updated the codepen to 3.1.1 and you can see it going wrong when you type @<something>

https://codepen.io/anon/pen/aLLMvw?editors=1010

from tribute.

@ThomHurks Well shoot. One thing I'm noticing is that if I view your codepen in Chrome the position is correct, but if I view it in Firefox the positioning is off but the textarea is also rendered in a different spot. What browser are you viewing in? Also what is the intended layout of the page?

from tribute.

I just tried a different browser, this is what it looks like in Firefox for me. The intended layout is a column of comments on the right side of the page. The textarea is where you write a comment.

from tribute.

This second screenshot is Chrome, so it's also wrong in Chrome for me.

from tribute.

@ThomHurks Okay thanks, that helps!

from tribute.

I'm experiencing the same issue...
I guess something with the left positioning went wrong because it was fine before.

from tribute.