+4Hi,
I'm having a strange peculiar situation where when I input the data into the item - everything looks alright. However, after submitting the item and viewing the item, all the panels have overlapped... Is there a different section that I should mark to prevent this overlap? Or any tips as to how to go about addressing this?
Original - In "New Mode" - No data inputted
-------------------------------------
Data Inputted and Saved/Submitted (Control #2/Control #3 overlap) - In "Display" Mode
Best answer by MegaJerk
so part of the reason as to why this is happening is because of how your panels are positioned and resized when controls inside of them are being hidden.
Here is an example form on which I have two outer panel columns and then a few internal panels being hidden (highlighted) by rules:
When previewed:
Ah! When Controls are hidden they invoke a resizing function that removes their height from the parent container, which in this case, reduces the size of the Panel 2. This resizing function will work its way outwards from the control being hidden all the way to the final "parent container" being the Form canvas itself. So Internal Panel 2 is hidden, it's size is removed from Panel 2, and its size is also removed from the Form. The same thing happens when Panel 4 is hidden, however, because Panel 1 was almost the same size as Panel 2, and because we have taken so much height away from the Form's height, our form is now visibly smaller than the contents!!!
This is not great!
How can we prevent this from happening? Well... your options are limited. Without trying to figure out a clever way of rewriting all of the typical Nintex resizing code, I recommend just setting your panel containers to not resize at runtime. You can do this by going into their settings and expanding the Advanced dropdown:
That prevents the Panel from resizing so when I render the form:
You can see that my form's height is maintained, and controls are hidden, but nothing ends up overlapping. You would of course need to do this to Panel 1 if you also had controls that could be hidden in there, but you get the point.
Beyond that, I think your only other option would be to do some heavy js rewrites (just for the form in question) of how the resizing function works (NWF.FormFiller.Functions.RepositionAndResizeOtherControlsAndFillerContainerHeight or NWF.FormFiller.Resize.RepositionAndResizeOtherControlsAndFillerContainerHeight, depending on your version) which I just don't recommend as it would be a massive undertaking.
With all that out of the way, if having two columns and not being able to resize the form looks too ugly for you, then I would recommend changing it up to a single column design. Because you're hiding things, and because, as we've shown, hidden controls will pull the controls below them upwards, depending on your formatting rules you might still end up with a nice compact looking form despite all of the information.
I hope this shines some light on the mystery of your overlapping panels. let us know if you need further help or input beyond this point.
+14Is what you've shown the entire form?
Could you show us the Developer Form Environment?
Are there any Controls that are being Hidden when you look at the form in Display Mode?
Are these Panel Controls inside of a Repeating Section?
Do you have any custom code, Rule or otherwise, related to the Hiding or Showing of the Panels in question?
If you could answer the above questions it would go a long way in helping to troubleshoot. Obviously something repositioning the elements when certain conditions on the Display Form are being met, but without knowing a few more intimate details about the form it'll be difficult to say what those conditions might be.
+4Hey MegaJerk,
Thanks so much for responding! Definitely to note for future responses to be more clear aka more pics. I had someone else rework my form, but apparently I had too many panels i.e. I would put compartmentalize each control into a panel, and to make matters worse some of these panels had "hide" rules in them so definitely affected spacing.
Resolution was to basically get rid of some panels and make two overarching panels with some minor sub-panels. Though now, here is another conundrum:
Display Mode
- The panels are now overlapping over the bottom footer.
Nintex Form
Let me know if any additional data is needed!
Thanks!
+23+14so part of the reason as to why this is happening is because of how your panels are positioned and resized when controls inside of them are being hidden.
Here is an example form on which I have two outer panel columns and then a few internal panels being hidden (highlighted) by rules:
When previewed:
Ah! When Controls are hidden they invoke a resizing function that removes their height from the parent container, which in this case, reduces the size of the Panel 2. This resizing function will work its way outwards from the control being hidden all the way to the final "parent container" being the Form canvas itself. So Internal Panel 2 is hidden, it's size is removed from Panel 2, and its size is also removed from the Form. The same thing happens when Panel 4 is hidden, however, because Panel 1 was almost the same size as Panel 2, and because we have taken so much height away from the Form's height, our form is now visibly smaller than the contents!!!
This is not great!
How can we prevent this from happening? Well... your options are limited. Without trying to figure out a clever way of rewriting all of the typical Nintex resizing code, I recommend just setting your panel containers to not resize at runtime. You can do this by going into their settings and expanding the Advanced dropdown:
That prevents the Panel from resizing so when I render the form:
You can see that my form's height is maintained, and controls are hidden, but nothing ends up overlapping. You would of course need to do this to Panel 1 if you also had controls that could be hidden in there, but you get the point.
Beyond that, I think your only other option would be to do some heavy js rewrites (just for the form in question) of how the resizing function works (NWF.FormFiller.Functions.RepositionAndResizeOtherControlsAndFillerContainerHeight or NWF.FormFiller.Resize.RepositionAndResizeOtherControlsAndFillerContainerHeight, depending on your version) which I just don't recommend as it would be a massive undertaking.
With all that out of the way, if having two columns and not being able to resize the form looks too ugly for you, then I would recommend changing it up to a single column design. Because you're hiding things, and because, as we've shown, hidden controls will pull the controls below them upwards, depending on your formatting rules you might still end up with a nice compact looking form despite all of the information.
I hope this shines some light on the mystery of your overlapping panels. let us know if you need further help or input beyond this point.
+4Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
