ExpressionEngine Channel Loops, Conditional Statements, Grids and Whitespace

by Jonathan Longnecker

I ran into a really weird issue using ExpressionEngine on a project recently and thought I'd let you know what I figured out.

I had decided to try a new responsive grid based on using text-align: justify;. Barrel has a good overview of how it works. Everything was fine and hunky dorey until I started putting things into EE 2.10.1. For example, here was what a couple of columns looked lik in my HTML:

<div class="col-wrapper col2">
  <div class="col"></div>
  <div class="col"></div>
</div>

However, whenever I put the columns in a channel loop and use some sort of conditional statement, EE would strip the whitespace and the end of each column so that they all ended up on the same line. This totally jacked up the spacing/floating that the justified grid used. Why? I have no idea. I guess it's just a limitiation of this particular responsive column framework. Either way, ExpressionEngine shouldn't be messing withe my code, yo!

This:

<div class="col-wrapper col2">
    {exp:channel:entries channel="channel"}
        {if any_conditional}{/if}
            <div class="col"></div>
    {/exp:channel:entries}
</div>

Gave me this:

<div class="col-wrapper col2">
    <div class="col"></div><div class="col"></div>
</div>

I tried adding an   after the last div inside the channel loop, and that helped - but it added extra space and made the grid get off enough that I was manually adjusting all sorts of stupid things.

Turns out there's a better way. Go grab yourself a copy of Low Replace and use it to add a new line to the end of your loop. Just make sure there's a space at the end of your div. Way better than enabling PHP on every template and using a blank ECHO.

Here's the final code:

<div class="col-wrapper col2">
    {exp:channel:entries channel="channel"}
        {if any_conditional}{/if}
            <div class="col"></div> 
            {exp:low_replace find="SPACE" replace="NEWLINE"} {/exp:low_replace}
    {/exp:channel:entries}
</div>

I can't tell you if this if fixed in ExpressionEngine 3, but if you're using a justified responsive grid and EE2 hopefully this will help.