Solved

Nintex form dynamic content overlapping with other controls

  • 13 October 2017
  • 5 replies
  • 114 views
P
Badge +3

I am trying to place HTML content on the Nintex form O365.

 

This is working for me using any of these controls like Label control, Multiline control or Richtext. This is done using Javascript code behind.

 

After binding the HTML data, the content in the control is just spilling out and overlapping with other controls down below. Though controls below this are expected to realign and move down, but they are not. Other controls just stay in same place. (screen shot attached)

 

These are the solutions that i have tried, but did not work

1. Set resize run time

2. Place the control within Panel 

3. Register the code in these events NWF.FormFiller.Events.RegisterAfterReady and RegisterBeforeReady

 

Please suggest any solutions which you have come across to solve this problem. 

 

If there are better ways to place html content on screen, kindly suggest.

icon

Best answer by prasad06k 19 October 2017, 21:08

View original
1 Attachment

5 replies

P
Badge +3

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. 

P
Badge +3

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.

TomaszPoszytek
Userlevel 7
Badge +17

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

Regards, Tomasz Poszytek
TomaszPoszytek
Userlevel 7
Badge +17

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

Regards, Tomasz Poszytek
P
Badge +3

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.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings