Ensure the panel is big enough to hold the complete repeating section without any overlapping. 

If the issue still persists do share the Nintex Form in design mode, for more clarity.

The repeating section rows are not static, based on my dropdown choice I run a REST API call, retrieve items and add rows. WIll this be a problem?

No, that will not be an issue.

Check for below points:

1. Ensure all the controls inside the panel are highlighted when the panel is selected
2. Ensure enough spacing between each control

Refer the below screenshot:

Thanks for replying to my questions!

This is how I have it now in a panel

Provide more spacing between the controls in the below highlighted area: 

This is what i have now

And this is the code to populate the repeating section

NWF$.each(results.d.results, function(i, item)
{
NWF$(".myNounModifier .nf-repeater-row:last .charTitle input").val(item.Characteristics);
NWF$(".myNounModifier .nf-repeater-row:last .charDescription textarea").val(item.Definition);
if(item.Mandatory)
NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Required");
else
NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Not Required");
NWF$(".myNounModifier").find('a').click();
});

The results

and strangely the last empty row is not present - instead a blank space - I think this is the issue but not sure how to fix this

Apart from this I have to perform other functionalities like deleting the rows and retrieving new data and populating the repeating control. This has been a huge headache, so many hours spent. None of my control are touching each other. 

Any help is greatly appreciated 

Thanks

Kalpana

The below picture clearly shows that repeating section is taking more space than what is provided by the panel:

Do provide more space as mentioned or even beyond and check for the controls in the Form preview mode:

Thanks for working with me on this: So currently I added space

but it still looks like this

I also have code to show and hide the delete button and the Add new row on a dropdown bind

NWF$(document).ready(function()

{

                NWF$("#"+ NounModifier).bind("change", GetCharacteristics);

});

function GetCharacteristics()

{

    // only execute this function if the script has been loaded

    if (ready)

    {

                                                var selectedNoun;

                                                var selectedNounModifier;

                                                selectedNoun = NWF$('#' + Noun).find('option:selected').text();

                                                selectedNounModifier = NWF$('#' + NounModifier).find('option:selected').text();

                                                NWF$(".myNounModifier").find('a').show();

                                                NWF$(".myNounModifier").find('img').show();

                                                //Remove previous values if there are any

                                                NWF$(".myNounModifier .nf-repeater-row").each(function(){

                                                var title = NWF$(this).find('.charTitle input').val();

                                                if(title != "")

                                                NWF$(this).find('.nf-repeater-deleterow-image').click();

                                                });

                                                var restQuery = SPAppWebUrl + "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Noun-Modifier-Characteristics')/items?$select=Noun/Title,NounModifier/Title,Characteristics,Mandatory,Definition,Value&$expand=Noun,NounModifier&$filter=(Noun/Title eq '" + selectedNoun+ "') and (NounModifier/Title eq '" + selectedNounModifier + "')&@target='" + SPHostUrl + "'";

                                                // create  new executor passing it the url created previously

                                                var executor = new SP.RequestExecutor(SPAppWebUrl);

                                                // execute the request, this is similar although not the same as a standard AJAX request

                                                executor.executeAsync(

                                                {

                                                                url: restQuery,

                                                                method: "GET",

                                                                headers: { "Accept": "application/json; odata=verbose" },

                                                                success: function (data)

                                                                {

                                                                                // parse the results into an object that you can use within javascript

                                                                                var results = eval(JSON.parse(data.body));

                                                                                NWF$.each(results.d.results, function(i, item)

                                                                                {

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charTitle input").val(item.Characteristics);

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charDescription textarea").val(item.Definition);

                                                                                                if(item.Mandatory)

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Required");

                                                                                                else

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Not Required");

                                                                                                NWF$(".myNounModifier").find('a').click();

                                                                                });

                                                                                NWF$(".myNounModifier .nf-repeater-row:last").addClass("rptClass");

                                                                                NWF$(".myNounModifier").find('a').hide();

                                                                                NWF$(".myNounModifier").find('img').hide();

                                                                },

                                                                error: function (data)

                                                                {

                                                                                // an error occured, the details can be found in the data object.

                                                                                alert("Ooops an error occured");

                                                                }

                                                });

                                                //set the textbox to the currently selected dropdown value

                                                NWF$('#' + txtNounModifier).val(NWF$('#' + NounModifier).find('option:selected').text());

                                }

                }

}

If you wish to hide the Add Row and Delete option use the below setting in Repeater Section rather doing in the script:

Also. notices an extra ending '}' in the above code. Please do use browser developer tool (pressing F12) and check if any script errors are found in the console.

Thanks for your reply!

There are no errors. I took a snippet of my code, may be I missed something. 

As for the control's setting, I can't use prevent add/delete setting, because f I do that I can't add rows programmatically as well. 

Thanks

Kalpana

Can you share the exported form XML to troubleshoot?

I sure can! Thanks for working with me on this.

I was able to add the form only to my initial post up top. 

Try zipping (.ZIP) the form definition .XML file and then attached

I already attached it to my first post along with the javascript txt file - do you see it?

Got it !

Below are the steps performed to view the form and fix the repeating section scroll:

1. Removed the script in the Custom Javascript and Custom Javascript Includes, because with this the form used to NOT load and used to show loading image
2. On successful publish of the form, viewed the form in the browser with inspect element on the panel (which contained the repeating section) and increased the height from 509px to 651px. On increasing the height of this panel the scroll bar disappeared and worked as expected.
3. Increased the same panel height to ensure the published form show the panel height above 651px. 

PFA updated form. Hope this helps! 

Even if I set the height to 700, once I programmatically populate the repeating section, the scroll bar appears unfortunately.

Can you inspect the repeating section panel with data populated and check for the CSS which is cause of the scrollbar to appear? Just like how I have mentioned earlier. 

Also, try to update the CSS definition which is causing the scrollbar to appear. 

This may not be helpful, but I just want to pose the question. If the panel is required because of the use of Tabs, and the panel is the cause of the scrolling, what if you show/hide just the repeating section, removing the panel? It looks like the repeating section is the only control for that tab. Since the repeating section auto grows on its own and is then limited by the panel. Maybe this isn't an option, but wanted to throw the idea out there.

Hi,

Insert Repeating section inside Panel, Go to Panel Configuration settings. In advanced Section Resize at  Run Time selected as YES

Thanks for the replies and suggestions - none of that worked for me - but I was able to use css as suggested by chaitra and got it working !

Thanks Chaitra for your continued help!

Your welcome !!