Design parse file | do not show on frontend

Squiz Matrix Support
1

Matrix Version:6.80.0

Looking for some advice.

I am testing a show_if within the design parse file, this works via a regular expression of no = hide / yes = show in front end. The feedback form link I am showing or hiding is raw html on a standard page and is nested via parse file.

But I dont think my markup is correct, when setting the metadata to ‘no’ on the homepage it’s showing the container as white below the header asset. Is there something I am missing for this to not show on my homepage (we are using Bootstrap 5 classes).

design parse file:

<!-- Baseline feedback form -->

        <section class="container help-landing-page">
            <div class="row">
                <div class="col-lg-12 beta-wrapper-text">
                    <div class="row">
                        <MySource_AREA id_name="baseline_feedback_form" design_area="show_if" cache="1">
                            <MySource_SET name="condition" value="keyword_regexp"/>
                                <MySource_THEN>
                                    <Mysource_print id_name="baseline_feedback" />
                                </MySource_THEN>
                                <MySource_ELSE>
                                    <div class="d-none d-md-block col-lg-3 col-md-4"></div>
                                </MySource_ELSE>
                        </MySource_AREA>
                    </div>
                </div>
            </div>
        </section>
        <br/>

Nested standard page:

<div class="container feedback-layout-wrapper">
    <div class="row wrapper-content">
        <div class="col feedback-layout-wrapper-text">
            <span aria-hidden="true">
                <span class="label label-warning"><a href="./?a=5354?source=%frontend_asset_name%" target="_blank" title="User feedback form">Tell us what you think of this page</a></span> <span class="beta-text"><span class="feedback-banner-hyphen">-</span><a href="./?a=5354?source=%frontend_asset_name%" target="_blank" title="User feedback form">all feedback helps us improve.</a></span>
            </span>
            <span class="visually-hidden">
                <a tabindex="-1" href="./?a=5354" target="_blank" title="User feedback form">Link to feedback form, all feedback helps us improve.</a>
            </span>
        </div>
    </div>
</div>

Image of homepage when hidden:

dev-homepage-white-bar
dev-homepage-white-bar1591×582 36.4 KB

Thanks
Innes

2

What you’re seeing is expected with the way it’s currently wrapped:

  • Your show_if only controls the inner content (baseline_feedback vs the ELSE div).
  • But the outer wrapper always renders:
    <section class="container help-landing-page"> ... </section> plus the <br/>.
  • So when metadata is no, you still output an empty Bootstrap container/rows (and your .help-landing-page styles / container padding / row margins / the <br/> can create that “white block” under the header).

Try the following:

  <!-- Baseline feedback form -->
  <MySource_AREA id_name="baseline_feedback_form" design_area="show_if" cache="1">
    <MySource_SET name="condition" value="keyword_regexp" />

  <MySource_THEN>
    <section class="container help-landing-page">
      <div class="row">
        <div class="col-lg-12 beta-wrapper-text">
          <div class="row">
            <MySource_PRINT id_name="baseline_feedback" />
          </div>
        </div>
      </div>
    </section>
  </MySource_THEN>

  <MySource_ELSE>
    <!-- output nothing -->
    </MySource_ELSE>
  </MySource_AREA>

let me know how you go

1 Like
3

Thanks very much @NickyP - thats worked a treat! Much appreciated.