problem with tabs and repeating sections

[pysimon]

Hello

I have a form with repeating section in different panel and each panel interact with a tabs and rules but when i add a item to one of the repeating section the other are no more visible

Here is how are the 3 first panels when i open the form and click on the 3 first tabs

And when i create a new element in the first form repeating section the other one are no more accessible

could you help me

best regards

Py simon

[emha]

As far as I can see repeating sections itself are shown, they just miss controls.

make sure you reslly placed controls INTO repeating section, not just over it.

[pysimon]

normaly i must see all the repeating section

and i just see a small part

and as you can see in this picture all the control are in the repeating section and the repeating section is in a panel on witch i appply the rules

you have an idea ??

best regards

[MegaJerk]

could you export and attach your Form along with any javascript that you're using? 

It might be easier for someone to evaluate the issue (especially when there is custom code involved). 

[emha]

do you show/hide controls or panels within repeating section with formatting rules and/or appearance settings? or even javascript?

that's typical case when repeating section do not render correctly.

[pysimon]

here is the file

https://drive.google.com/file/d/0BzdRAepZmH1hNDdSVmRMNzlyd2c/view?usp=sharing

best regards

PY

[pysimon]

yes it's with the rules but WITHOUT javascript, do you have an other solution  to do it ??

[emha]

this is quite known annoyance of using hiding formatting rule(s) within repeating section.

I'd suggest to report it to ‌, maybe they will be able to provide some workaround.

only way that I know how to overcome it is to disable controls instead of hiding them. when all the controls are rendered with full size initially along with repeating section itself it (usually) works correctly.

[MegaJerk · Accepted solution]

I happen to have be doing work on a different Repeating Section resizing problem, and so I was able to figure out exactly what was happening to make your issue occur. 

The Problem

When you would add a new row to a visible Repeating Section, the Panels that were hidden (which also contained a Repeating Section) would be the wrong size once you would unhide them. 

What Was Nintex Doing?

The deeper I get into how Repeating Sections work with the other controls on the Form, the more strange they seem... Essentially, whenever you add a new row to a Repeating Section, one of the last things that happens is that it looks at ALL of the Repeating Sections on the ENTIRE form, and will resize them based on the outer height of an inner div that has the class ".nf-repeater". Why is that bad? Well! When you HIDE a control (like a repeating section), the height of that inner div is reduced down to 0!!! This means that as soon as you added a new row to any of your sections, all of your hidden sections would resize down to 5px! Once you clicked on a different tab to hide the current panel and display the new one, it would render the new panel from the inside out. So.

1. Repeating Section @ 5px in height

2. Surrounding Panel

Because the Repeating Section inside of this control was taken down to such a tiny size, the Panel would barely resize and would subsequently hide all of the controls inside of the Repeating Section's row which were still full height (because the overflow on panels is hidden by default)! 

So How Do We Fix It?

Javascript of course! 

Because every time you add a row, every Repeating Section is resizing (including the one that you already added the Row to), what we need to do is to "roll back" the changes made to those other Repeating Sections. This is where the RegisterRepeaterRowAdded event can help us out! 

The below code will run every time that you add a new Row to a Repeating Section. 

(*** EDIT AND UPDATE ***) 

I made the mistake of thinking that the Delete Row wouldn't also have the same incorrect universal resize code, but I was wrong. It does. So! I have had to make a revision to the code I provided earlier to account for this. I have also correctly sized one of the divs that was originally being set to outerHeight() instead of height(), broke out all of the logic for resizing into its own function, and reduced the number of siblings that it would adjust down to only those that are hidden (which are the only ones that will mess up when the default Nintex Forms Repeating Section code runs).

Please adjust your code to reflect these changes!

var rebuildHiddenRepeaterSections = function(eventRow){
  var thisRepeatingSection = eventRow.closest("[data-controlname]");
  var thisFormControlID = thisRepeatingSection.attr("formcontrolID");
  var formFillerDivCurrent = NWF.FormFiller.Functions.GetFormFillerDiv();
  var siblingRepeatingSection = formFillerDivCurrent.find(".nf-repeater:hidden").closest("[data-controlname]").not("[formcontrolid='" + thisFormControlID + "']");
  siblingRepeatingSection.each(function(index, section) {

    var thisSiblingSection = NWF$(section);
    var thisRepeaterControl = thisSiblingSection.find(".nf-repeater");
    var thisRepeaterInnerControl = thisRepeaterControl.parent();
    var thisSiblingSectionRows = thisSiblingSection.find(".nf-repeater-row:not(.nf-repeater-row-hidden)");

    var totalRowHeight = 0;
    thisSiblingSectionRows.each(function(index, row){
      totalRowHeight += NWF$(row).outerHeight();
    });
    
    if (totalRowHeight > thisRepeaterControl.height()) {
      thisRepeaterControl.height(totalRowHeight);
    }

    thisRepeaterInnerControl.height(thisRepeaterControl.height());

    if (thisSiblingSection[0].className.indexOf('nf-error-highlight') != -1) {
      thisSiblingSection.outerHeight(thisRepeaterControl.outerHeight() + 4);
    } else {
      thisSiblingSection.outerHeight(thisRepeaterControl.outerHeight());
    }
  });
};

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function(thisRow) { 
  rebuildHiddenRepeaterSections(thisRow);  
});

NWF.FormFiller.Events.RegisterRepeaterRowDeleted(function(thisRow) { 
  rebuildHiddenRepeaterSections(thisRow);
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Just open up the settings on your form and paste the code in like shown: 

Essentially, it will first gather all of the other Repeating Sections on the Form, and will iterate through each one. 

For each one of those 'Sibling' Repeating Sections, it will add together the heights from all of its Rows (with the exception of the very first parent row), and will then set the height of that Section to match that value, effectively undoing everything that was done by Nintex Form's internal AddNewRepeaterRow function. 

What Does It Look Like In Action???

Well... Like this! 

Here I have added a Row to the Repeating Section on the Second Panel 

And Here are what the other two Panels look like!

Panel 1:

Panel 3:

Conclusion

I hope this solves your problem... Because messing with Repeating Sections is the absolute worst.  

[pysimon]

Hello

thank you very mutch your code it run very well but i have a probleme when i delete and item in the repeating section in your answer you tell me that i must 'Please adjust your code to reflect these changes!' do you have a little bit more information about the changes .

best regards

PY