How to recover white-space on hidden variables in the catalog..

[Stephen W_]

UI policy actions and "setDisplay()" are only effective at filling empty space vertically, not horizontally

Example, if I have two variables in a 2 column container:

[   a   ] [   b   ]

If I use setDisplay to hide "a", "b" will remain in it's place.  

                [   b   ]

If I have four variables:

[   a   ] [   b   ]

[   c   ] [   d   ]

it will fill from the bottom, completely ruining any organization.

[   c   ] [   b   ]

                  [   d   ]

Short of DOM manipulation.. is there a way to alter the collapse behavior?

Thanks,

-Stephen

[Chuck Tomasi · Accepted solution]

This is where careful layout design comes in. For best user experience, keep your show/hide fields either directly under or to the right of the static fields.

E.g. Choose one option and it 'turns on' several other fields below or to the right.

[Stephen W_]

I guess there's no great answer to this: There's no way to affect the way whitespace from hidden elements is utilized/recovered.  

Because of this it's important to avoid removing removing elements unless there's a suitable element to replace it below.

Sometimes this isn't possible when you have a lot of interdependent variables on the form.   Another half-measure is to set readonly instead. This doesn't de-clutter, but it accomplishes the other reason items are removed from a form - without altering the arrangement.

[Stephen W_]

That's what we do when necessary, but the natural reading pattern is left to right not top to bottom.   An intuitive UI will follow this pattern.

So while we try to put the most closely related fields adjacent to one another, we occasionally have to break this convention if we use dynamic display of fields as you describe.

I didn't think there would be an option to "left align" or "expand horizontally" outside of DOM manipulation.. but I was hoping.

I'll write up an enhancement request for it.

Thanks for the input Chuck!

-Stephen

[Chuck Tomasi]

If I have answered your question, please mark my response as correct so that others with the same question in the future can find it quickly and that it gets removed from the Unanswered list.

If you are viewing this from the community inbox you will not see the correct answer button.   If so, please review How to Mark Answers Correct From Inbox View.

Thank you