NicolasCARPi / jquery_jeditable

jQuery edit in place plugin. Extendable via plugin architecture. Plugins for plugin. Really.
https://jeditable.elabftw.net
MIT License
1.74k stars 458 forks source link

Width/Height does not work with masked input #187

Closed mendizalea closed 2 years ago

mendizalea commented 5 years ago

Description

With none masked input width and height works fine but with masked input no.

jQuery version: 3.3.1 Browser: Chrome OS: Windows 10

$(document).ready(function () {
        // MASKED INPUT
        $(".masked").editable("save.php", {
            type: "masked",
            mask: "99:99:99.999",
            tooltip: "Click to edit...",
            width: '100%',
            height: "1.400em"
        });

        // NONE MASKED INPUT
        $(".edit").editable("save.php", {
            tooltip: "Click to edit...",
            width: '100%',
            height: "1.400em"
        });
    });
NicolasCARPi commented 5 years ago

Hello,

Thanks for reporting this issue. I'm not sure how it can be fixed, but feel free to make a pull request if you want :)

mendizalea commented 5 years ago

I have solved the problem by changing the following file: jquery.jeditable.masked.js

ORIGINAL

/**
 * Depends on Masked Input jQuery plugin by Josh Bush:
 *   http://digitalbush.com/projects/masked-input-plugin
 *
 * @file masked input plugin for jquery-jeditable
 * @author Mika Tuupola, Nicolas CARPi
 * @home https://github.com/NicolasCARPi/jquery_jeditable
 * @licence MIT (see LICENCE file)
 * @copyright © 2007 Mika Tuupola, Nicolas CARPi
 * @name PluginMaskedInput
 */
'use strict';
$.editable.addInputType('masked', {
    element : function(settings, original) {
        /* Create an input. Mask it using masked input plugin. Settings  */
        /* for mask can be passed with Jeditable settings hash.          */
        var input = $('<input />').mask(settings.mask);
        $(this).append(input);
        return(input);
    }
});

NEW

/**
 * Depends on Masked Input jQuery plugin by Josh Bush:
 *   http://digitalbush.com/projects/masked-input-plugin
 *
 * @file masked input plugin for jquery-jeditable
 * @author Mika Tuupola, Nicolas CARPi
 * @home https://github.com/NicolasCARPi/jquery_jeditable
 * @licence MIT (see LICENCE file)
 * @copyright © 2007 Mika Tuupola, Nicolas CARPi
 * @name PluginMaskedInput
 */
'use strict';
$.editable.addInputType('masked', {

    element : function(settings, original) {
                    var input = $('<input />').attr({
                        autocomplete: 'off',
                        list: settings.list,
                        maxlength: settings.maxlength,
                        pattern: settings.pattern,
                        placeholder: settings.placeholder,
                        tooltip: settings.tooltip,
                        type: 'text'
                    }).mask(settings.mask);

                    if (settings.width  !== 'none') {
                        input.css('width', settings.width);
                    }

                    if (settings.height !== 'none') {
                        input.css('height', settings.height);
                    }

                    if (settings.size) {
                        input.attr('size', settings.size);
                    }

                    if (settings.maxlength) {
                        input.attr('maxlength', settings.maxlength);
                    }

                    $(this).append(input);
                    return(input);
                }
});
NicolasCARPi commented 5 years ago

@mendizalea Cheers. Do you mind making a proper PR so you can get authorship ? :)

mendizalea commented 5 years ago

PR completed. Thanks!