Page 1 of 2
textarea
Posted: Wed Oct 23, 2019 9:07 am
by 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?
Re: textarea
Posted: Wed Oct 23, 2019 3:24 pm
by 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);
});
}
Re: textarea
Posted: Wed Oct 23, 2019 3:37 pm
by 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?
Re: textarea
Posted: Wed Oct 23, 2019 4:24 pm
by 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);
});
}
Re: textarea
Posted: Wed Oct 23, 2019 4:40 pm
by johan
Kevin
Thanks for your help. I think there's a problem with the second script. It doesn't work.
Johan
Re: textarea
Posted: Wed Oct 23, 2019 4:47 pm
by 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.
Re: textarea
Posted: Wed Oct 23, 2019 8:13 pm
by 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
Re: textarea
Posted: Wed Oct 23, 2019 10:48 pm
by 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.
Re: textarea
Posted: Thu Oct 24, 2019 2:19 am
by kev1n
Had to fix something (see edited post above)
Screen recording:
https://streamable.com/yllkj
Re: textarea
Posted: Thu Oct 24, 2019 9:40 am
by johan
Kevin
This works perfect, thanks a lot for your help.
Johan