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

SELECT elements cannot be customized via the 'class'/'style' attributes #234

Closed iedutu closed 2 years ago

iedutu commented 2 years ago

Description

The settings for class/style to be applied to a SELECT form element are not applied.

How to reproduce

Use a themed website (ex. Keen Themes) and add an editable SELECT element. There is no inputcssclass option to add.

It helps a lot if you can create a working example from this template: https://codepen.io/iedutu/pen/NWvPzMP

Expected result

The class specified in inputcssclass (or better, selectcssclass) setting will be applied.

Actual result

No class is applied.

Environment

Apache 2.4/MySQL/PHP. Google Cloud Ubuntu 20.4

jQuery version: latest Browser: Chrome OS: macOS

# Solution - see below the newly added code.
            // SELECT
            select: {
                element : function(settings, original) {
                    var select = $('<select />');

                    if (settings.multiple) {
                        select.attr('multiple', 'multiple');
                    }

                    /* SOLUTION: Apply css or style or both. */
                    if (settings.inputcssclass) {
                        if ('inherit' === settings.inputcssclass) {
                            select.attr('class', $(self).attr('class'));
                        } else {
                            select.attr('class', settings.inputcssclass);
                        }
                    }

                    if (settings.style) {
                        if ('inherit' === settings.style) {
                            select.attr('style', $(self).attr('style'));
                            /* IE needs the second line or display won't be inherited. */
                            select.css('display', $(self).css('display'));
                        } else {
                            select.attr('style', settings.style);
                        }
                    }
NicolasCARPi commented 2 years ago

Hello, I see. Do you want to make a proper PR for this?

iedutu commented 2 years ago

Done!

On Tue, Oct 12, 2021 at 12:19 PM Nicolas CARPi @.***> wrote:

Hello, I see. Do you want to make a proper PR for this?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/NicolasCARPi/jquery_jeditable/issues/234#issuecomment-940826270, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHFWOXZB66FFFLBVC7IWCX3UGP4Q3ANCNFSM5FZ6LOHQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Cristian.

NicolasCARPi commented 2 years ago

So adding inputcssclass to a select element does work. Your codepen doesn't show a select for me. Try it with the demo: https://github.com/NicolasCARPi/jquery_jeditable/commit/8de524055ef37b7ea90dcb513a47f9da629db5c0