problem with tabs and repeating sections


Badge +1

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


10 replies

Userlevel 5
Badge +14

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.

Badge +1

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

Userlevel 5
Badge +14

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). 

Userlevel 5
Badge +14

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.

Badge +1

here is the file

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

best regards

PY

Badge +1

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

Userlevel 5
Badge +14

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.

Userlevel 5
Badge +14

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: 

206220_pastedImage_11.png

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 

206221_pastedImage_14.png

And Here are what the other two Panels look like!

Panel 1:

206231_pastedImage_17.png

Panel 3:

206232_pastedImage_18.png

Conclusion

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

Badge +1

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

Userlevel 5
Badge +14

So, at some point, I changed the code because I too found that when you deleted a row it would mess up. 

I then updated the code, as you see above, and that line, "Please adjust your code to reflect these changes!" simply means that you should be using the code above, and not what I had posted before that. 

Are you absolutely certain that you're using the code shown above? 

If not. Please copy and paste that into your form! 

Reply