JQuery.jeditable.js Edit-in-place bug (Windows7, Chrome 16)

Question

I'm using this edit-in-place widget jquery.jeditable.js . On Windows 7, in Chrome (latest version - 16), when I type text into the input field, there is an odd bug where the text goes lower within its own field. This makes it unreadable (see attachment). It happens every other letter that i type. Has anyone come across and solved this bug?

Thanks in advance

Answer 1

The default font and size for input fields is different from the rest of the page. If you set those in an element containing the input field, there's no effect. You have to force the input field to inherit the font and size. Preferably, you also want to set a smaller border so that won't crop the text either.

This is what I use with jquery.editable.js:

input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: rgba(15,200,0,0.05);
    border: 0;
}