cancel
Showing results for 
Search instead for 
Did you mean: 

Why Do My Controls Jump Around?

Workflow Hero
22 5 6,422

Summary

When Hide formatting rules execute on a form, controls lose their placement.

Symptom

The below form contains a Choice control titled Colors. When ‘Colors’ is selected, either Red or Green will determine what controls show and what controls are hidden.

Here is the Nintex Form in Design Mode:

badFormDesigner.png

When Green is selected, the Multi Line textbox and two Single Line textboxes will be hidden:

badHideWhenGreen.png

The second rule, "Hide Red", will hide the Single Line textbox 1 and the Single Line textbox 3:

badHideWhenRed.png

In Runtime, when the ‘Hide Red’ rule is selected, you will see how the bottom ‘Hide When Green’ single line text boxes ‘jump’ on the Multi Line textbox and do not align correctly after the above controls are hidden:

badRenderPreview.png

Resolution

  • Add a Panel control and nest the two bottom Hide When Green controls within the panel.
  • Remove the ‘Hide’ rule from the controls (Select the Hide Green Rule drop down and select ‘Remove from selected controls’).
  • After you have nested the Hide When Green controls, select the Panel control and then apply the Hide Green rule to the Panel and NOT the individual nested controls (Select the Hide Green Rule drop down and select ‘Add to selected controls’).

Below is the corrected form in Design Mode:

goodFormDesignerpng.png

Since the controls are now nested within the Panel control, the form will render correctly:

goodFormPreview.png

5 Comments
Workflow Hero

I'm following this and my controls are still jumping all over the place.  Panels move way up the form, resizable panels squeeze to almost nothing, panels that need to remain on top of the form have other panels inserted above them as those panels are unhidden.  HELP!

Not applicable

Hi

You may have worked it out , sorry for the delay in the reply!

Do you have any rules on your form? It sounds like you do. Are your rules on the items themselves inside the panel or the whole panel? My rules are on the individual items inside the panel and not the panel itself  that seems to work.

Tried to illustrate as below.

Not sure if this helps you.

Karen

Workflow Hero

Hi Steve, check out my recent reply in this thread: Collapsing form height when controls are hidden . It sounds like you're missing "section" classes for some of your panels and/or their contained controls. Also check out this thread: Fields are not displaying in order after adding Hide Show Rule  

In the latter thread I said this:

Putting them into the same panel is certainly one option. I've also found that the order in which fields are displayed at run-time can be influenced by the order in which the show/hide rules are listed in your "Rules" panel. For example, if you have Section 1 and Section 2, and then you have a show/hide rule for Section 2 listed immediately above the show/hide rule for Section 1, then Section 2 will be displayed above Section 1 in the form at run-time. This can happen even if Section 1 and 2 are displayed correctly in Nintex Forms Designer.

 

It appears that Nintex Form rules are executed from top to bottom in the order in which they're displayed in the "Rules" panel. This is similar to how Javascript files are read from top to bottom.

Workflow Hero

(Experienced in Forms Designer Version: 2.8.1.10)

While I believe panels are helping to mitigate some of what I am experiencing, I am experiencing differences in rendering between display and edit mode of panels and controls within them. I have no rules set on this form for now (though I do want to apply quite a few once I can get the layout to stabilize).

Display Mode (all is well):

Display mode controls displaying without issue

Edit Mode of the same panels and controls (all is not well):

Note how the two look-up fields displaying as drop-downs are forced down and over-lapping the mutli-select choice fields displayed as checkboxes. Note how the last two control panels' bottom borders have been moved up (side borders shortened) in edit mode. I have reverted to versions of the form prior to insertion of these panels and controls, re-inserted, and re-published several times with the same results. In fact, the last attempt I copied and pasted the first control panel, inserting different controls which point to similar but different fields as in the first panel. 'Resize at runtime=yes' for all controls and panels.

I have no idea how to resolve this difference in rendering between display and edit modes. Any thoughts?

Sara Peczkowski

Sarah Oliver

Priyakant Chaturvedi

Workflow Hero

The solution assumes the controls that need to be hidden, are the same controls and need to be hidden at the same time. I have 2 side by side controls that need to be separately hidden depending on their parent controls and this solution does NOT work because because the rule applied on the panel cannot be the same for both!

FFS provide a fix for this, Nintex, not dance around the issue!!!