Forums

Hi,
I am using Chronoforms V5, Joomla 3.4.1 to create a registration form for a church.

I am trying to take advantage of Chronoform features as much as possible, and write as little of my own Javascript so that one day this task might be able to be turned over to someone who doesn't know Javascript. To do that, I have taken advantage of the ability to enter events associated with dropdown selections.

I pretty much succeeded, except for some extra space on the form. I have tried with Firebug to figure out what's going on, and tried various CSS changes, but have not succeeded.

The extra space is related to some hidden fields on the registration form. Families can register 1 to 6 children in the Religious Ed program. In the "Child Info" section of my form, I display the fields for "Child 1" and hide the fields for Child 2 - 6. I have a dropdown that asks "Add another child to the registration form?" and if "yes" is selected, the fields will display for Child 2, along with another "Add another child" question, and so forth, until Child 6 fields are displayed.

In the initial state, there is about 225px extra of white space under the "Do you want to add another child" question. If you say "yes," and Child 2 fields are revealed, there is about 180px of extra white space. If Child 3 fields are revealed, then there is about 135px of extra white space, and so on. The white space gap seems to be related to how many fields are hidden.

Link to the form

Any ideas about what I can do to fix this? If I have to add some Javascript, I will, but where?

Thanks so much!

Hi,
I think I have figured out what is happening, but not how to fix it.

If I my fields that load as parent-hidden are individual fields, then there is no extra space on the form when it loads.

But if my parent-hidden fields are multi-fields (like first and last name, for example), then extra space is added.

Here are two meaningless, "scratch" forms.
Form with multifields and unwanted extra space
Form without multifields and normal space

Both have fields that are initially hidden - field1, field2, field3, and field4. (They show up if Age=10 is selected). In the first form, field1 and field2 are together in a multifield; field3 and field4 are also together in a second multifield. That form displays with extra space between "Age" and Checkbox group.

In the second form, I didn't use multifield; field1, field2, field3, and field4 each appear on a separate row on the form. This form displays with normal space between "Age" and "Checkbox Group."

How can I use parent-hidden multifields, without having extra space displaying on the form initially?

Thanks!

Hi JerseyGirl,

This CSS will remove the blank space - though it also crunches up some of the displayed inputs too, you could try setting the margin-bottom ot 1 or 2px and see if that looks OK overall.

.gbs3 div[id^="form-row-multi-"] {
  margin-bottom: 0px !important;
}

It might be possible to devise some more sophisticated selector that can distinguish between the displayed and hidden blocks but I can't see it right now.

Bob