Comments (10)
@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.
Related Issues (20)
- tributejs npm package version 5.1.3 is lastest, but not have loadingItemTemplate in options HOT 1
- Hi, why I can't use arrow key on my mention tooltip HOT 1
- Menu is offset incorrectly
- Cannot set cursor in front of the mention tag
- DOM-based XSS due to un-escaped special characters HOT 1
- Is it possible to add dropdown with heading? HOT 1
- Removing items with backspace is not working when added by showMenuForCollection menu HOT 3
- Removing characters one by one with backspace then auto suggesting is not working HOT 1
- Instead of characters matches, is there words can match
- latest Typescript complile error
- Option to use DOM elements instead of HTML strings as templates
- Typescript 4.8.2 (Required by Angular 15) TributeOptions Type issue
- Update to stimulus-use debounce broke remote data load
- Error while clicking on scroll bar - chrome on mac
- Replacing words that contains space
- Performance issue and freezes
- When we can have a new version with the latest changes from master? HOT 2
- Tribute doesnot seem to work inside bootstrap modal.
- Disable the need a symbol to starts the lookup
- Issue with Deleting Mention via Programmatic Trigger in Tribute.js
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tribute.