CSS Styling & Positioning Issues

[JamoCA]

I haven't been able to use this plugin in any projects due to the background highlighting color not aligning with the text in the textarea field. I believe it's due to font spacing, kerning or height issues with the hidden text wrapping consistently with the displayed text. I can only get it to function after sizing everything perfectly using a fixed-width textarea field... which I can't really use since we're using a responsive framework.

[marexandre]

@JamoCA do you have any screen shows or some code that you could share so I can understand the issue better? Btw, we at Gengo use this plugin in production with a responsive layout, and it works with no issue (there are some small issue with Japanese fonts... but don't think you are using that)

[julkue]

@marexandre I have a demonstration for you that doesn't work. Seems to be the same as @JamoCA described. Also this will highlight the wrong things and when running $context.textareaHighlighter("destroy"); it will indefinitely unwrap elements. I don't want to put you under pressure, but please reply within 2 days, otherwise I need to switch over to a different plugin.

[zachrybaker]

I get that this is a tough nut to crack, but it really is unfortunate that this plugin only seems to work with static-sized content. If you go with a setup that tells the text area to fill the container, it will not position the highlight containers on any line except the first line.

The rules I am using for that textarea are: width: 100%; height: 100%; max-height: 100%; /* min-height: 500px; / display: block; position:absolute; top: 0; left:0; right:0; bottom:0; / padding:1em; / box-sizing: border-box; / For IE and modern versions of Chrome / -moz-box-sizing: border-box; / For Firefox / -webkit-box-sizing: border-box; / For Safari / And the rules for the parent are: width: 100%; height: calc(100% - 60px); display: block; position:absolute; top: 20px; left:0; right:0; bottom:0; box-sizing: border-box; / For IE and modern versions of Chrome / -moz-box-sizing: border-box; / For Firefox / -webkit-box-sizing: border-box; / For Safari */

Attached is a

[julkue]

@zachrybaker For the time being, check out this article for an alternative.