Conditional Region Hide

Wappler General How To
#1

Can a conditional region hide from source code itself? To result in a clean code and not empty divs?

#2

See https://docsdev.wappler.io/guides/show-or-hide-elements-conditionally/36361#conditional-region

#3

I see this but the conditional region delete the content not the wrapper.

#4

What happens when you set the condition on the wrapper?

#5

You have empty divs in source code. Like messi code.

#6

Let me experiment.

#7

You are right. It looks like there is no workaround for this. Sorry.

#8

This issue cropped up long ago, here. I don’t think there’s a solution, but it is possible to avoid one of the issues. Eg if the contents is hidden but you’re left with a visible border which was enclosing the content, then you can create an extra div and apply the condition to that div. You have to edit the code manually to do this.

#9

The conditional regions work like that - they always leave an empty div when the content is hidden.

#10

Hey @TomD
in nodejs is OK, doable… But if you talk about php I would love to here more about it my friend

#11

On NodeJS, if it is conditional on page load (i.e. not changed after rendering), you can use EJS conditions to do server-side conditional areas bound to a server-side data source (set at the ‘App’ node of the page:

<% if(_('q_clubsubscriptionstatus.allowmemberlogin')!=1) { %>
    <section id="section_membersubscriptionstatus">
        <div class="container my-4">
            <div class="row">
                <div class="col">
                    <h1 class="text-center text-danger"><i class="fa-duotone fa-circle-exclamation"></i></h1>
                    <h1 class="text-center">The club's subscription to this service has expired</h1>
                    <p class="text-center">Access will be re-established when a valid subscription is purchased by the club</p>
                </div>
            </div>
        </div>
    </section>

    <% } %>

It’s manual but works really well

3 Likes