Change the spacing on multi-select list?


Badge +8

I've noticed that when multiple multi-select lists are added near each other, some excessive spacing happens. I would love to know how to modify this as it's way too much space to make the form look nice. Please note the screenshots below.

Notice how they are placed on the form. It's a multi-select box, with a drop down below it. This leaves normal spacing between the items.

Notice the placement of the multi-select list with a checkbox choice component below it.

This is how it comes out on the form. Looks fine, right?

Notice how it comes out looking fine on the actual form.

Now, when I add additional multi-select list components look what happens to the form.

Not only does it add excessive space between the two multi-selects on the right, it then adds additional space between the multi-select and the checkbox component on the left.

Why?


10 replies

Userlevel 5
Badge +14

try to place controls that you want to appear one beside to other into common panel.

see  

Badge +8

That works, if you only need one or two choice boxes. I'm trying to create a form that has 10 boxes. It's not realistic to put them all side-by-side. With the width of the site, it makes sense to have 3 per row, with 1 on the final line. Unfortunately, the form comes out with huge gaps of space in between each row.

So this:

Actually becomes this monster:

Userlevel 5
Badge +14

I meant it to create a separate panel for every row of controls.

so try to create 3 panels and move 3 controls inside each.

Badge +8

Sorry about the late reply. I had to focus on other projects. Separate panels has the same effect.

Userlevel 5
Badge +14

then I affraid you have not much to do with that. it's simply how it works.

maybe you could yet try two more things

- make some small space between panels so that they do not touch each other

- make a separate panels for each control. so you will have one panel per row (like level 1), 3 panels within row panel (level 2) and each control placed into its own panel (level 3).

make sure  lower level objects are really placed into upper level panels, not just overlapped.

but I do not give it too much chances to make it work

Badge +8

So it seems like we found a bug. How can we submit this to have it fixed?

Userlevel 5
Badge +14

On the top of the page there is Support >> NINTEX Support  link

Badge +8

So I worked with  (Once again, thank you SO much Jonathan!) from Nintex and he was able to figure it out. We don't know exactly why it's happening, but we know how to get around it.

It turns out, if you fully expand your choice options to show the entire control, you no longer have this problem. In the screenshot below you have the normal control sizing after dragging it on to the form(pictured top) and then you have a fully expanded control(pictured bottom). It looks like you can add as many controls side by side, top to bottom, wherever; and they all display fine as long as you fully expand them after adding them to the form.

Userlevel 5
Badge +14

if you make it so big that it can display all the option at design time, it does not need to resize at runtime, hence no empty space is created.

so this solution is reasonable just for static and quite short set of options.

Badge +8

I agree on why it works. I, personally, feel that the control should automatically be formatted when building the form to be expanded to full size. The designer might as well see the form how it will look to the end-user, right?

Reply