something with css wrong--selected mention bleeds #34

jackdempsey opened this Issue Apr 22, 2012 · 3 comments


None yet

3 participants


Can't tell if there's a bug or (more likely) I'm doing it wrong:

Have setup a basic example to demo it to myself and am seeing strange behavior. I have the relevant js and CSS files in place. Not sure what this could be (no errors) but hoping someone's seen it before.


You should add this in your css file:

.examples .mentions-input-box {
 font-family: 'pt sans', arial, helvetica, sans-serif;
    margin-bottom: 16px;
    font-size: 12px;

.examples .mentions-input-box textarea {
    font-family: 'pt sans', arial, helvetica, sans-serif;
    font-size: 12px;

and also add in ".mentions-input-box .mentions > div > strong > span"

filter:alpha(opacity=00); /* For IE8 and earlier */

Hope this works for you

Have a good day

hey @jorisblanc that looks good, thank you! Is there a reason why I had to add this, as opposed to just putting it in the css for the project?


Hi Jack,

This happens because the styling of the text within the textarea and the underlay is out of sync. MentionsInputs works by copying the text to an underlay that sits underneath the textarea, which contains the highlighting.

@auchenberg auchenberg closed this Apr 24, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment