bootstrap 4 inline editor changes row height?

erwinrichard

when the user clicks on an inline edit field, the row gets suddenly higher. (newest versions of datatables, editor, bootstrap 4.0 beta) is this a known problem or am I missing something?

allan

Neither a known issue nor are you missing something - I'm afraid that looks like a bug. I don't recall seeing that before, but it is fairly apparent when looking for it.

I'll dig into it and post a fix.

Allan

erwinrichard

Thanks, Allan.

Another small glitch that I'm facing: In the popup editor one line wraps between label and a dropdown list. I have no special css that I'm aware of. All out of the box bootstrap4.

Regards
Erwin

allan

With this example and Bootstrap 4 styling (locally) I get this:

Allan

erwinrichard

This is my result:

allan

Are you able to link to the page so I can check it out and debug the problem please?

Thanks,
Allan

erwinrichard

Hi Allan, unfortunately it's not easy to make the app accessible over the net. The problem seems to be related to the following code:

        editor.on('initEdit', function () {
                editor.field('instance').hide();
                editor.field('environment').disable();
                editor.field('domain').disable();
                editor.field('portal_type').disable();
            }
        );

        editor.on('initCreate', function () {
                editor.field('instance').show();
                get_free_instances();
                editor.field('environment').enable();
                editor.field('domain').enable();
                editor.field('portal_type').enable();
            }
        );

When I change hide() / show() to enable() / disable() there is no layout problem. Looks like calling show() on the field in create when its already visible leads to the layout glitch.

allan

On this page if you show the Create window and then in the console run:

editor.field('first_name').show()

it seems to be okay. I've tried enable and disable as well, but haven't managed to recreated the issue yet I'm afraid.

Allan

erwinrichard

Hi Allan,
I have changed the application logic and no longer need to show and hide fields in the popup editor. Also, I was unable to replicate/isolate the layout glitch outside of my application so far, so I assume that it was a side-effect of my app environment.
Thanks and regards
Erwin

erwinrichard

Hi Allan, the layout glich with the line break in the popup window showed up again when I was using dependent() with show: hide.
A workaround seems to be to explicitely call editor.field('fieldname').hide() in the on('initCreate' ...) call for fields that are afterwards shown using dependent(). Seems there is a problem when calling show on a field that is already shown here.
Regards
Erwin

allan

Interesting - thanks for the insight. I'll see if I can debug that further based on that.

Allan