[Resolved] Conditional Form Field Display Does Not Hide DIVs

[Author]

Posts

[tacoF]

I am trying to: conditionally display form fields

Link to a page where the issue can be seen: hidden link

I expected to see: the rows hidden

Instead, I got: DIVs are there and they create a lot of space

Screenshot attached.

[Nigel]

Hi there

Can you show screenshots of how/where you added the conditional checks?

[tacoF]

Here it is

[Christopher Amirian]

Hi there,

I could not see the form as it needs to have a login.

I'd appreciate it if you could give me the URL/User/Pass of your WordPress dashboard after you make sure that you have a backup of your website.
It is absolutely important that you give us a guarantee that you have a backup so if something happens you will have a point of restore.

Make sure you set the next reply as private.

That way I can see the code live and understand the issue better.

Thanks.

[tacoF]

I'm at a stage where I can't upload the new code to staging which I could have given access to.

You should be able to recreate this perhaps by creating a form with conditional fields? I also have HTML fields in the conditional.

When I look at the front-end debugger, the HTML is just hidden and not DISPLAY none which would remove it all together.

To see the HTML, you can just create a free account, it's 10 seconds to create an account.

[Christopher Amirian]

Hi there,

Unfortunately the user/pass does not work for me.

I created a test version and that is not happening on the test version.

login:

hidden link

The form:

hidden link

The conditional group is added after the property type and it does not add the extra padding.

But it indeed shows the content in the HTML and it sets the display: none; CSS property.

So the conditional group does not avoid loading the content itself. Because the conditional group is meant to be there to show and hide depending don't he selection of the other items in the form.

So the HTML content should be there.

Now most probably on the theme that you use you added the ROW div classes that most probably is a Bootstrap related one and it has padding by default.

You can add a CSS code to remove the padding of the div.row items for the form. Something like:

.cred-form div.row {padding: 0 !important;}

Your assumption is correct that the content does show in HTML and it hides via CSS.

Thanks

[tacoF]

Please try again. The theme does not add it.

[Christopher Amirian]

Hi there,

I managed to login. You added a custom CSS in CSS editor. Please check the screenshot.

Remove the code below:

div.row {
  margin: 2em 0;
}

Thanks.

[tacoF]

My issue is resolved now. Thank you!