Form fields display differently on New Vs Existing


Badge +6

I have a form which has fields inside panels to for validation/hide rules.  When I view the form in a New state it looks fine, but when I open an existing item, it scrunches all the fields together.  Additionally, and this may be another discussion topic, the rules to hide specific fields are not working consistently.  When they display, they are either scrunched on top of other fields, or data below the hidden fields is moved up and overtop of the hidden fields that are now displaying.

Images:

New Entry:

Existing Entry:

We are starting to have more and more issues with the form and the rules to hide/unhide fields depending on answers from other fields.

What is the best way to resolve this?  Is this a common occurrence?

Thank you,

Christine


11 replies

Userlevel 5
Badge +14

could you post how does design look like?

I'd suggest to add additionally a separate panel for each row of controls

Badge +6

There is a panel around the entire section (highlighted in orange).  I have individual panels around the questions which are hidden unless the question about is 'Yes' (highlighted in green).

Additionally, what I am finding, is the hidden questions "move" differently based on which main question you answer first...please see below screen shots:

Answering 'Yes' to Hardware first (and subsequent question), then answering 'Yes' to Software

The subsequent Software question is pushed down to be in line for the server question and not w/ the 1st subsequent Hardware question (even though they are in line in the design).

Answering 'Yes' to Software first, then answering 'Yes' to the Hardware questions

Again, the 1st Hardware subsequent question is moved down, and the 2 questions below that, now are getting bumped up above and overlaying other questions.  This is the biggest issue we are facing.  I can deal with extra spacing, but why are questions moving up, completely out of order and overlaying other questions?

Thank you so much for your help!!! happy.png

Userlevel 5
Badge +14

as advised above, add additionally a separate panel for each row of controls, it should fix it.

you should get layout structured like
  • orange panel
    • 1st row panel
      • top label (which of the following...)
    • 2nd row panle
      • service support Y/N control
      • trial needed Y/N control
      • collection transmission Y/N control
    • 3rd row panel
      • contruction Y/N control

         .... etc ....

Badge +6

Hi Maria,

I did as you said, and it did not resolve the issue.  Please see screen shots below:

Design - I have highlighted each panel I added. (White, Orange, Green, Light Purple, Purple)

All hidden fields expanded - still overlapping, and the sections that are in the Light Purple panel above, are not staying together in the below image.

Please advise.

Thank you for your help! happy.png

Userlevel 5
Badge +12

This does occur on some forms, especially those with a lot of rules.  Some general things to try:

  • Change the ordering of the rules (Seems strange but the order of the rules and for which they were applied can have side effects)
  • Try not to share the same rule on more than one component (seems counter intuitive, but sometimes creating a new rule instead of applying  the same rule to multiple controls fixes this issue).
  • Make sure nothing  is overlapping or touching the border of panels or other controls - adjust the controls that are having issues, sometimes just snapping them into place on the grid again fixes this

Unfortunately its more of an art than a science in this case.

Thanks

Mike

Userlevel 5
Badge +14

make sure you correctly placed all the control into (inside) respective panel, not just overlapped over the panel. panel has to get darker when you hover control over it.

control correctly placed within panel cannot jump out of its borders.

Badge +6

Yes, I ensured that the controls were inside the panels, and the controls are not touching any of the sides of the panel.

We use panels quite heavily, as we have a good amount of rules to control whether they are required or if they should be hidden.  Our form is quite extensive in side.  It's mainly just this section that is causing the most issues.

I'm not sure what else to do to get it to stay and work as it should.  Can I provide any other details or screen shots to help you?

Thank you.

Userlevel 5
Badge +14

could you once again proof check for 'Is the Software Cloud based' controls and respective enclosing panels? from recent screenshots it seems to be only part that doesn't behaves correctly.

try to set different bg colors for single controls and panels so that you could see which one moves improperly.

do you perform any visibillity or placement manipulation from javscript and/or customm CSS?

it may interact with a rule system in a negative way...

have you checked developer console for any errors?

Userlevel 5
Badge +12

Also did you try not reusing any rules - I'm telling you, sounds odd, but has worked many of times simply recreating a rule and applying it:

IE:

First Name & Last Name currently sharing a rule called "CheckForEmpty"

Rule:   IsNullOrEmpty({Self})     //Shared on First Name and Last Name

Create two rules instead:

IsNullOrEmpty(FirstName)

IsNullOrEmpty(LastName)

Counterproductive?  Maybe - ....

Has worked - Yes.

Badge +6

Hi Mike,

Yes, we do not have any controls that share rules.  We ended up removing the panel around the control and put a rule on label and input fields (separate rules).  That resolved the issue.  More rules to track now, but the fields are hiding and showing without overlapping other fields, and when they are hidden, the space collapses like it should.

Thank you!

Userlevel 5
Badge +12

Great to hear it is resolved, I know these types of issues can drive you up a wall.  They really do surround the placement of controls and the rules ordering and how they are placed (seems like having the rule applied to the panel was the cause in this case - causing the sharing of the rule essentially).   Anyways, glad you got it straightened out.

Mike

Reply