textarea

[johan]

Hi
In my form I have severall textarea in the form and in a subform.
When I enlarge the textarea (drag right bottom corner), the field comes under the next field.

Is it possible to keep the selected field always on top?

[kev1n]

Using ResizeObserver you could determine the resized object and then set its zIndex to e.g. 999 so that it becomes the top-most element

Add this Javascript in the form's custom code field:

Code: Select all

if(nuFormType() == 'edit') {
    var myObserver = new ResizeObserver(entries => {
        const [changed] = entries;
        $('textarea').css('z-index', 1);
        changed.target.style.zIndex = "999";
    });
    var boxes = document.querySelectorAll('textarea');
    boxes.forEach(box => {
        myObserver.observe(box);
    });
}

[johan]

Kevin
This works fine when I enlarge the field, it comes over the other fields.
It would be nice if the field returns to it's original size if I click on an other field. Is that possible?

[kev1n]

Code: Select all

if (nuFormType() == 'edit') {

    $("textarea").each(function() {
        $(this).data('height', $(this).height()).data('width', $(this).width());
    });

    var myObserver = new ResizeObserver(entries => {

        $('textarea').css('z-index', 1);
        const [changed] = entries;
        changed.target.style.zIndex = "999";

        $("textarea").each(function() {
            if (changed.target !== $(this)[0]) {
                $(this).height($(this).data('height'));
                $(this).width($(this).data('width'));
            }
        });

    });

    var boxes = document.querySelectorAll('textarea');
    boxes.forEach(box => {
        myObserver.observe(box);
    });
}

[johan]

Kevin
Thanks for your help. I think there's a problem with the second script. It doesn't work.
Johan

[kev1n]

Well, it works fine here.

I created a test form under https://demo.nubuilder.com/
The form is called textarea. If you add a new record and then paste my code in the developer console (F12), you can see it in action if you resize textareas.
But it could of course be that the code causes problems with subforms.

[johan]

Kevin
Strange,
In your demo it's just the same as in my site.
When I enlarge Textarea 000 it comes between textarea 001 and it doesn't resize.

Johan

[Janusz]

just fyi,
I took the code sent by Kev1n and just copy/paste it to my application in Form JS and works properly.
So the previous window go back to its original size once you start to resize another one.

[kev1n]

Had to fix something (see edited post above)

Screen recording: https://streamable.com/yllkj

[johan]

Kevin
This works perfect, thanks a lot for your help.

Johan