Are your multiline edit controls jumping around when you click your cursor in them? Do you have the Grammarly extension installed? Well then read on

This is an issue that has been plaguing some of us for a while, but it has come up quite a bit lately as I believe grammerly is getting more popular. The CCS generated by the extension can interfere with mutliline edit controls (HTML TextArea tag) and cause positioning issues. This is not a WEBDEV only issue, a quick google search will find lots of web developers from all walks of line having this issue.

So exactly what is the issue? Take a look at this quick example I put together. That well captions multiline edit control “Edit control”. Looks fine right now

But as soon as I click in it, it jumps to the right. BTW that green circle is the indicator for grammerly.

As an end user, you could click that green circle and turn off the editor for this control, or even turn the extension off for an entire site. But that doesn’t do us any good as developers unless we want to train our users how to do that!

With enough searching on Google you will find that adding the attribute data-gram = “false” to your control will disable the plug-in for a control as well. You will also find references to data-gram_editor = “false” but apparently that is an old attribute. Our challenge is how to get that attribute on the control in WEBDEV, there doesn’t appear to be a place to do it directly in the control description screens.

So that brings us to JQuery, sometimes I feel like I have a hammer looking for nails 🙂

Anyway remember the first thing I always recommend when doing JQuery is disabling the JavaScript Compression of WebDev. You can do that at the project level by turning off Compress ALIAS and JavaScript, and Compress JavaScript

You can also do it at the page level, overriding the project settings for a specific page.

Now in the browser Load event we add this line of code. Note our control is named EDIT1. Remember they will all be generated in all uppercase by WEBDEV

jQuery("#EDIT1").attr( "data-gramm", "false" );

Now when we test our page, we can click in the input control and the grammerly extension doesn’t activate and our edit control doesn’t move around

If we view the source we can see the attribute was added

You can now enjoy multiline edit controls that don’t jump around, and return to your regularly schedule program.

• Quick Tips
• WEBDEV
• WX