Condition for hide section but element is still rendered in html

Hello, just like the title says. For the section with the ACF looper element, if fields are empty, nothing shows, but the whole section is still visible in the source and with default margins.

You can see empty spaces between numbers and text.

https://stjepan.braco.does-it.net/themeco/

Is it possible to stop rendering that section if the condition to show isn’t met?

Hey Ofier,

Thanks for reaching out!

The section should not be there based on the condition. That being said, we need to check on your setup properly. Please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

Hello,

added secure note.

Hi Ofier,

I have checked and found that Looper Provider is set to Off. And that might be the reason why the condition is not working as expected. You need to set the Looper Provider first and then you can check the condition.

Hope it helps.
Thanks

Hello again,

I did add looper provider on section where is condition, but nothing changed.

Hi Ofier,

I have checked it again and found that you have set Looper Provider to Section and Row. I have changed it to Section and set the condition to Column where the Looper Consumer is set. To check, I have set the background color to the section above and under the specific section.

Hope it helps.
Thanks

Hello again,

after checking, element is hidden but that is because margins were removed.

What I want to acomplish is to have element (section) that if has populated fields to show it, but if fields are empty to be hidden. That section shouldn’t be visible even if have set up top and bottom margins. Also, for some reason, now my text in text field won’t show at all.

Is that possible in Cornerstone?

Hi Ofier,

The Looper Provider needs to be set to the Section and you need to set the Looper Consumer and the Condition to the Row. The Marging or Padding needs to be set to the Row. In that way, you can achieve what you are expecting. You can set the condition to the Looper Consumer, inside the Provider.

Hope it helps.
Thanks

Hello once more,

I see now where I made a mistake in setting up logic to show/hide, but even inside row margins render on the front end when fields are empty. So there is still empty space between sections.

Is that because margins are on the element, and condition only hides looper consumer?

Hi Ofier,

You are partly correct, the condition is set on looper so you need to set it inside the Looper Provider not on it. Here, you need to set the condition to the looper consumer where the looper works.

Thanks

So basically, put a margin on the picture and text element. That would require to do adjustments on different resolutions but would work.

Yes, that will work.

Thank you.

I also tried with true false as a separate field and put that in condition for show/hide.

For some reason I cannot figure out what should be in condition if true/false in looper but outside works.

You can close this topic.

Glad to hear that it works.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.