How to get jeditable and autosizeInput width to use the correct css styling

In a previous post, I showed how to get the jquery libraries jeditable and jquery.autosize.input (autosizeInput) to work together.

 jeditable - https://github.com/tuupola/jquery_jeditable
autosizeInput - https://github.com/MartinF/jQuery.Autosize.Input

After implementation, i decided to change the font used in my css from a serif to a monospaced font type and discovered that autosizeInput was incorrectly calculating the width size based on the serif font size. Looking at the code, I discovered that my custom autosizeInput type creates a input element but that element is not attached to the DOM. In other words, the input element does not inherit the styling from css.

To fix this, i added a line that attaches the created input element to the DOM:

$.editable.addInputType('autosize', {
    element : function(settings, original) {
        /* Create an input. Mask it using autosizeInput plugin. Settings  */
        /* for mask can be passed with Jeditable settings hash.          */

        var input = $('<input />');
        input.appendTo('body');

        input.autosizeInput();
        if (settings.width  != 'none') { input.width(settings.width);  }
        if (settings.height != 'none') { input.height(settings.height); }
        $(this).append(input);
        return(input);
    }
});