White space being creating when selecting different options from drop down menu

https://9p2z5k.axshare.com

I have created a drop down ( Payment Method)on the customer Information page that is giving me a bit of an issue. The drop downs work fine when selecting them but if i click on option 1 (bank Acct) then switch to option 2 ( Credit/Debit card) a gap is created between the drop down options and the submit button. Any help is greatly appreciated.

I’ve clicked the different options in the dropdown menu a couple of times and what I noticed is that every time I select the credit/debit card option, the submit button is placed down even further. I think you somewhere in put that on click the submit should be moved along the y-axis with a certain amount, and you keep moving it further with every click. You could instead try to move it to a set position, by setting up move to instead of move by

Hope this helps?

@jmgipsen is correct - you’re adding the same amount of space every time the selection changes.

You can move groups of widgets relative to other groups using the ‘Move to’ function, and specifically Move to y.bottom.

Say your payment method label and picker is grouped together and called PaymentMethod. Then group your Credit Card Fields together and call them CreditCard, and do likewise with your Bank account fields.

Finally, group your ‘Save payment method’ and ‘Submit’ checkbox together and name them, say as FinalButtons.

You can then add cases to your picker which will show the grouped fields you want to display and then, once shown, move the Final Buttons group to the X position of the shown group and the bottom of the shown group plus, say, 20px.

So your case for your credit card group might look like:

If selected option of PaymentMethod equals Bank account
then show BankAccountFields
and move FinalButtons to [[BankAccountFields.x]] and [[BankAccountFields.bottom+20]]

In this case ‘BankAccountFields.x’ and ‘BankAccountFields.bottom’ are local variables that you point at the BankAccountFields widget group.

This approach is very robust, but it might be overkill - if you know the pixel positions for each state of the payment method fields, you could just move them to absolute pixel values, rather than relative values as above. However, this is a very, very useful method to learn for more complex form design with multiple things moving around.