This issue is not just with placing html content in the control, even if we place some plain text which is longer it starts overlapping with other controls below it.
There is a work around for this problem.
Posting this to help other developers facing similar issues.
Use the following snippet to resize controls on Nintex form.
NWF$('.YOURCONTROLNAME').bind('DOMNodeInserted', function (event)
{
if (event.target.parentNode.className.indexOf('YOURCONTROLNAME') != -1)
{
var formFillerDivCurrent = NWF.FormFiller.Functions.GetFormFillerDiv();
var currentControl = NWF$('.YOURCONTROLNAME');
var heightIncrease = event.target.parentNode.scrollHeight;
NWF.FormFiller.Events.ExecuteRepositionAndResizeControlsHeight({
currentControl: currentControl,
heightIncrease: heightIncrease,
heightDifferenceWithBorders: heightIncrease,
formFillerDivCurrent: formFillerDivCurrent
});
}
});
Steps to use this code snippet:
1. Update control name in CSS Class property of the control
2. Mention the control to be resized in the placeholder YOURCONTROLNAME in source code
3. Place the code in Nintex form javascript within any Nintex Ready events like NWF.FormFiller.Events.RegisterAfterReady.
Thats it. event.target.parentNode.scrollHeight will return the scroll height of the control to be resized dynamically.
You will see the controls with dynamic content getting resized automatically and should not get overlapped.
Hope this helps.
Hi!
How do you found out how to use the NWF.FormFiller.Events.ExecuteRepositionAndResizeControlsHeight function?
I haven't tried that yet, but I have a quite similar case...
I have created a tabbed form, where on the second tab (panel) there are two repeating sections, having set their contents dynamically. I have tried so far all I had - the "when --> done" events in jQuery, waiting, opening the second tab while filling with data, but nothing gave me 100% of success - still more then often, the second tab is getting shrinked to nothing, like there is no content. And then all recalculations for that tab are leading to many overlappings and a total disaster
I am wondering how to add dynamically rows to a repating section, which is in a not visible panel, and to be sure that not visible panel, once displayed, has all controls located properly, all tops and heights values are set correctly.
Do you think what you wrote can help in that case as well...?
Regards,
Tomasz
Well, anyways - I used the "SetInterval" functions and paused my script until a specific outcome is met.
For all ajax calls I decided to use the deferred and promise objects, and again to pase other actions until promise is returned.
This way Nintex Form is able to first dynamically populate data in controls, add new ones, and finally recalculate all top/bottom positions and heights.
I am no longer facing issues with overlapping now
Using your script I noticed some extremely big values being calculated for heights of the surrounding containers. Ex. the repeating section had 513px height, whereas the panel, in which it was stored, was receiving like thousands of pixels, of height...
regards,
Tomasz
Sorry for responding late on your question.
I could not actively login to the forum from few weeks.
Hope the code placed in this thread helped you to overcome the issue. It is just the same piece of logic used internally by repeater control. Depends when you run the script to resize, i ran this script towards the end i.e., after dynamic content is populated with some content. So there by, resize takes new height and width.