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.

Sign up for GitHub

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

Jump to bottom

Highlighting doesn't line up on the text entered #29

Open
atwskris opened this issue Mar 21, 2012 · 4 comments
Open

Highlighting doesn't line up on the text entered #29

atwskris opened this issue Mar 21, 2012 · 4 comments

Comments

@atwskris
Copy link

Starting to type a mention works fine, but after I select the mention the highlight is up and to the left.
The highlight follow the mention text but it is not on top of it as expected.

I tried the the same CSS applied to the textareas on the example site.

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

Tested in IE8+ and Chrome ... Ideas?

Thanks
K
@Ninir
Copy link

Ninir commented Mar 26, 2012

@atwskris Try to apply the SAME CSS rules as for your textarea, meaning:

  • line-height
  • front-size
  • margin
  • padding
  • box-sizing

and whatever you think that may conflict!

@SteelBRS
Copy link

Sorry for the late comment, but ...

The plugin generates a <div> before the <textarea> - this <div> probably inherits font, line-height, etc. from <body>
<textarea> doesn't inherit from <body>, so you need to explicitly style the <textarea> to match the generated <div>

Use Chrome developer tools to inspect the DOM & CSS styling at runtime - you'll see what happens

@SteelBRS SteelBRS mentioned this issue Aug 1, 2012
Open
@mikelinington mikelinington mentioned this issue May 29, 2013
Open
@johnthepink
Copy link
Contributor

I was able to fix this by altering elastic.js to take the padding of the textarea in to account. Line 58:

lineHeight  = (parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10')) + parseInt($textarea.css('paddingTop')),

@djhvscf
Copy link
Contributor

djhvscf commented Nov 7, 2014

Great. I'm going to test it and modified the files!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@atwskris @johnthepink @Ninir @SteelBRS @djhvscf