Highlighting does not match when scrolling inside fixed height textarea

[ruudk]

See this screenshot: http://cl.ly/2E1e3D0r1y3c0D2z0t2h/mentions.png

As you can see the blue tag that is placed behind the textarea isn't lined up correctly. This only happens when I enter enough newlines.

[auchenberg]

It seems like you have adjusted the line-height of the textarea. You need to remember to also update the line-height of the overlay-div which contains the actual highlighting. These two guys needs to be in sync, to give the right visual feeling.

[ruudk]

Nope, that's not it.

I set elastic to false and set the height of the textarea to 110 pixels. The problem is that the translucent background (with tag colors) does not move with the enters I give in the textarea.. I think it's impossible?

[auchenberg]

Okay, got it. This is a constraint of the component, since the highlighting is being added in a div on top of the textarea, and when you "scroll" inside the textarea the overlay isn't moving.

One solution could be to detect when you change line in the textarea, detect if its visible, calc the topOffset and added it to the overlay, so the positions would be in sync.

Feel free you fork it if you have any good solutions for this one :)

[auchenberg]

Dropped the option to disable elastic, since we don't have a solution yet.

[klederson]

@auchenberg i KINDA solved it by fixing the lineHeight and maxHeight at elastic plugin (yes not a final sulution but close to) ... its not a final solution but worked at all cases. You can see at https://vimeo.com/47694742 and https://gist.github.com/3375072

Maybe someone can contribute more to fix this annoying bug.

[auchenberg]

Since the highlighting is taking place in the underlay "under" the textarea, you must align the textareas and underlays style in terms for font-size, line-height and max-heights.

I didn't added automatic detection of the correct line-height and related styling, since it's something that should be fixed in the stylesheet, instead being done dynamically on each instance of the component.

The reason why it doesn't work with scrolling, is because the underlay isn't following the position of the textarea.

[aqibgulrez]

@klederson can you please share all working solution for this i cant fix this issue also?

[johnthepink]

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')),

[pinkeshdny]

hi,
add post with @ is working fine .. but how can be edit this post with mentioned tags?? @auchenberg

[ethanedeveloper12]

hello, how to disable jquerymentions input and reinitialize on a textarea??