Collapsing form height when controls are hidden

S
Badge +3

A couple of more days into Nintex forms now. I figured out how to suppress controls when the form is in different modes. This get's me part of the way there. However, there are some things I haven't been able to figure out like how to "collapse" the form height and visible controls when the hidden ones are suppressed. Without that behavior, large blank spaces are left on the form instead of having it more compact. We use this a lot where the initial creator of a list item will only need to fill in a few fields. But then the next time the item is edited (often by someone designated in a workflow) there are additional fields to be completed.

 

Anyone know how to accomplish this?

18 replies

J
Badge +3

Have noticed that when a control you are hiding is flush/too close to other controls, the form will sometimes not resize properly. Suggestion I have been given is to add a little space between the control you are hiding and the other controls above and below it.

S
Badge +3

Tried this with limited improvement.

S
Badge +3

Tried this with slight improvement but realized my issue might be related to more than what I stated in my original question. I think it has to do with the form reformatting when hidden controls become visible. Here's a link illustrating the root cause I think.

http://www.cob.org/data/forms.mp4

J
Badge +3

Hi Steven,

 

Great idea explaining this in a video! We have had a lot of success in hiding a group of fields by putting them in a panel on the form. You can then apply the rule on the panel to show or hide the group of controls and opposed to individual controls. The formatting is respected in the panels and the fields show up as expected.

 

I hope this helps.

S
Badge +3

Perfect - that's exactly the workaround I needed! Spent a number of hours on this and am grateful future forms will go much more smoothly wink.png

S
Badge +3

I pulled the video since the issue was addressed and there's no way to upload videos to this forum. However, I recently learned several other steps that need to be taken to ensure proper collapsing of forms:

  1. Use panels for the control or collection of controls you want to hide (thanks jan‌)
  2. Place the rules in the order which you want them to execute. If you're having issues, try adjusting the order of the rules.
  3. Do NOT use the same rule on multiple panels. Create a separate rule for each, even if they do the same thing. This was a big gotcha for me as it's not mentioned in the in-product online help and I wasted a number of hours on this. Nintex Support finally clued me in.
  4. Ensure your formulas are correct. I'm not certain of this, but I believe I had panels being hidden, even though the formula was not correct. That caused me to chase my tale for quite a while. Tip: if you mess up the formula badly enough, all of the contents of the form will disappear.

Hope that helps some. I finally feel like I know enough to build an interactive form now wink.png I asked Nintex Support to pass along the request to have #3 added to the online help file in a future release.

J
Badge +1

Thank you very much, Steven!

#3 is indeed quite obscure and was causing me all sorts of problems on my form.

A
Badge +4

John, this worked like a charm for me. Thanks! I added a 5 pixel space above and below the controls.

J
Badge +2

I am having the same problem with the panels. I have a form already created with a bunch of controls already in place. I try to add the panels to the form, but cannot get the controls to link to the panel. For some strange reason, I was able to get one contol to link to one panel, but now I cant remove it. Getting very frustrated. I have white space all over the place and know the panel thing will help, but I cannot figure it out. Any help out there on how to connect the control to the panel would be GREAT! The nintex help section is not helpful in this instance. I've done TONS of searches on the internet as well. Thank you!

E
Userlevel 5
Badge +14

just catch the control with a mouse, move and drop it onto panel. panel should get a bit darker when ready to enclose the control.

when you move the control with arrow key then it must not leave panel boundaries.

to remove the control from panel, again just catch it by mouse and drop it outside the panel.

J
Badge +2

Thank you very much! Finally got it to work. This stuff can be tricky. Now that I got my controls in panels, I'm having problems with huge spaces between the panels. Have any idea how I can fix this? It goes down the whole length of the form, shows a few more controls and then shows the save button. Any help would be much appreciated!

192632_pastedImage_1.png

E
Userlevel 5
Badge +14

make sure no controls and no panels overlaps each other in designer!

A
Badge +4

Jade, try these methods and save them somewhere for your team to access. I'm not entirely sure whether they apply to Nintex Forms in O365 but they certainly do for on-premises Nintex Forms. I think Method 1B might apply in your specific scenario (I added bold and emphasis). These methods have worked like a charm for me.

Method 1:
Use Panels to contain your fields and then apply the show/hide rule to the panel instead of the individual fields. Ensure the panel spans the width of your form. What will happen is the form will collapse to fill in the panel space if the panel is hidden. You may need 1 panel per field row to get it right.

IMPORTANT RULES (both may need to be applied):

(A) Add spacing between panels and also between fields within the panel (e.g. 5 pixels), otherwise even with panels it can still cause gaps in the form.

(B) Sometimes you will need to create duplicates of the same form "rule" to apply separately to each panel. If you use the same show/hide rule for two panels simultaneously it may leave a big empty space where the panels are or cause overlapping of fields. I've seen this happen many times. As a workaround, just copy the rule formula and add a #2 (etc) to the end of the name.

Method 2:

Be sure that your controls (and/or panels) have the "nf-section" CSS class added to them. Add this to the control's "CSS class" property. I think this is critically important for the Nintex Forms containers to work properly at runtime so that the form space pixel height is reserved and recognized. You may sometimes get away with not using this CSS class if you're lucky, but best practice is to always have these especially if vertical alignment is important.

The "nf-form-label" isn't adequate to solving this issue because it doesn't reserve vertical space on the form. It's not a "section" per say, so it shouldn't logically be attempting to reserve vertical space.


Method 3:
Use the rule formatting "Disable" option instead of hiding fields. It grays out the field although it's less obvious for text fields.

J
Badge +2

Thank you for the response! Method one worked perfectly for me! I had to go move everything to separate panels, add more spacing between the controls and panels, and then created rules for each panel/action. It was a lot of work, but the formatting finally fixed itself!

I then had a problem with making some of the fields required because of when some were hidden. Even if they weren't visible on the front end, they would still be required on the back end. I wonder if utilizing this disable feature (option 3) would help with this problem?

C
Badge +5

Can't put enough emphasis on #3!! I had to come back to this and re-read that part. Wasted day. 

D
Badge +7

Looks like the video is no longer available. :-(

C
Badge +5

Read Allan Nevala‌ 's post. That helped clear up a lot of my issues.

AasimNaseem
Badge +2

Be sure that your controls have the "nf-section" CSS class added to them. Add this to the control's "CSS class" property. This appears to be important for the Nintex Forms containers to work properly. Otherwise, your panels will hide via rules, but the UI will not adjust accordingly. The blank empty space will be left behind where you hide the panel.

 

Using the nf-section class on your panels, the lower panels will slide up to fill the empty space. 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings