0

I created a conditional in EE6 using Bootstrap 5 to determine display call to action buttons to show side by side when even number and full width stacked when odd. Used output total grid rows to determine if even or odd. All is working fine except the even numbers are not respecting the col-6 tag which should align side by side, they're stacking as half width on even numbers (odd numbers stack full width across as expected). So I want the first and second buttons to be side by side on one row and the third and fourth buttons to be side by side on a second row. ref: https://snipboard.io/Di908h.jpg

{cta}
<div class="row call-to-action-buttons call-{cta:total_rows}">
{if cta:total_rows % 2 != 0}
    <div class="col">
        <a  href="{cta:cta_url}"  >
            <div class="call-to-action-box">
               {cta:cta_label}
            </div>
        </a>    
     </div>
{/if}
{if cta:total_rows % 2 == 0}
    <div class="col-6 d-inline-flex">
        <a  href="{cta:cta_url}"  class="col">
            <div class="call-to-action-box">
               {cta:cta_label}
            </div>
        </a>
     </div>
{/if}
</div>
{/cta}
0

I guess you've created your CTA in a grid field.
Your layout indicates (probably) that you have either one or two CTAs (would be odd to have four in two pairs, but five stacked full-width vertically), which suggests you could simplify this layout considerably: I think this would achieve the same output without the duplication...

{cta}
<div class="row call-to-action-buttons call-{cta:total_rows}">
    <div class="col{if cta:total_rows % 2 == 0}-6 d-inline-flex{/if}">
        <a  href="{cta:cta_url}"  >
            <div class="call-to-action-box">
               {cta:cta_label}
            </div>
        </a>    
     </div>
</div>
{/cta}

Anyhow, it looks like the issue is the value being returned by your modulus conditional is not what you thought it was, so a good place to start is to confirm that these values are being calculated as you expected.

First check that the value returned by {cta:total_rows} is what you think it should be - have a look at the call-... value in the class statement and check that the value being appended is the correct one. If it is, try adding some brackets around the value in the modulus formula - something like:

{if {cta:total_rows} % 2 != 0}

and see if that works any better.

If none of that helps post some feedback on what happened when you tried the ideas here and perhaps that will help diagnose the issue for you.

HTH

5
  • Hi @jcogs Design. Yes it's in a grid called ''cta' And yes i was testing the value and it's returning the correct number of items in the row (i did have that on the page but didn't show it in previous clips. I tried your code and still stacking and not filling the column looks like: CTA 2: snipboard.io/JNQAE1.jpg CTA 3: snipboard.io/tEhV6f.jpg CTA 4: snipboard.io/j2JPYa.jpg
    – lberelson
    Mar 18 at 3:35
  • The issue is not that the value is not returning what i thought it was, that part is working fine. It's that the EE loop is not following the Bootstrap tags.... i.e. it's looping through the conditional and displaying the first col <col-6> then looping out and starting a new row... so instead of side by side buttons at half width, I get 'STACKED' buttons at half width. Hope that makes sense.
    – lberelson
    Mar 18 at 3:41
  • Did you try putting the cta:total_rows value in curly brackets? The issue with the conditional seems to be that the condition you have set is not firing - so extra class information for the smaller boxes is not being added. Most likely this is because the value being returned to the conditional is not evaluating correctly. If you are using the simplified logic try replacing the conditional with {if "{cta:total_rows} % 2" == "0"}-6 d-inline-flex{/if} and see if that works any better. Mar 18 at 13:10
  • Thx for offering your help... Using your suggestion and changing this line only with quote marks (see screen grab -> snipboard.io/JbNjp1.jpg) returns page results of row 4x (see screengrabs so not honoring the columns) -> snipboard.io/kfBWsV.jpg
    – lberelson
    Mar 18 at 13:58
  • You have a quote level issue - too many " in a row. Try using this version of your code: <div class="col{if 'cta:total_rows % 2' == '0'}-6 d-inline-flex{/if}"> - should work. Mar 19 at 9:21
0

Could it be you are creating a new row with each cta? Try this:

`
{cta}
{if cta:count == 1} <div class="row call-to-action-buttons call-{cta:total_rows}"> {/if}

...

{if cta:count == cta:total_rows}</div>{/if}
{/cta}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.