Fluid field - check if the field is the last
How Do I?
I have a fluid field called page content with a number of fields added to it.
What I want to do is add margin bottom a row if it’s not the last one, see below.
{page_content}
{page_content:text}
<div class="row{if ! page_content:last} mb-5{/if}">
<div class="col-12 paragraph-text">
{content}
</div>
</div>
{/page_content:text}
{page_content:related_video}
<div class="row{if ! page_content:last} mb-5{/if}">
<div class="col-12">
{content}
<div class="ratio ratio-16x9 mb-0">
{if !content:vimeo_hosted}
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{content:video_embed_code}?rel=0{if content:video_autoplay}&autoplay=1&mute=1{/if}{if content:video_loop}&loop=1&playlist;={content:video_embed_code}{/if}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
{if:else}
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/{content:video_embed_code}{if content:video_loop}?loop=1{/if}" width="640" height="360" frameborder="0"></iframe>
{/if}
</div>
{if content:overview}
<div class="small text-center mt-3 mb-0 description paragraph-text">
{content:overview}
</div>
{/if}
{/content}
</div>
</div>
{/page_content:related_video}
{/page_content}What I have seems to work unless the last field is a relationship field.
Am I misunderstanding how the last variable works?
Thanks
Hello @ minecraftle game, In your template code, you are trying to add a “mb-5” class to the “row” element if it’s not the last row within the “page_content” fluid field. However, it seems that you are using the incorrect variable to check if it’s the last row. You can try using “{page_content:row:count}” and “{page_content:total_rows}” within the conditional statement, you can compare the current row count with the total number of rows in the “page_content” field. If they are not equal, it means it’s not the last row, and the “mb-5” class will be added to the “row” element.
Add a bottom margin to each row in the page content, except the last one.
javascript
const rows = document.querySelectorAll(‘.page-content-row’); rows.forEach((row, index) => { if (index !== rows.length - 1) { row.style.marginBottom = ‘20px’; } });