ExpressionEngine Channel Loops, Conditional Statements, Grids and Whitespace

by Jonathan Longnecker

Glanbia Homepage
Look at that justified grid!

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 &nbsp; 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.

P.S. – If you want to learn how to create a more profitable web shop check out Freakishly Profitable. It's the best way to make a "monster" adjustment to your web studio's bottom line.

Comments

  1. I bumped into this too, filed it and is marked as accepted. Hopefully it trickles thru to an upcoming update.
    https://support.ellislab.com/bugs/detail/21951/Conditional-parser-removes-whitespace

  2. @GDmac Hopefully, though I doubt I’ll be using EE3 anytime soon. Such a weird bug - EE has always been so good at *not* screwing with my HTML. Oh well!

  3. Well i mostly document all core changes in a text file (and add a comment in the php file itself where i changed something). Then after the update (2.10, 2.11, etc.) sometimes the bug is fixed or else i add the change back in grin

    P.s. good to hear you’re back on track with 47media. Going thru business changes myself too, as our design-group broke up too. More freelance and looking around for projects.

  4. @GDmac Ugh, yeah I’ve done that before. No fun for sure.

    Thanks! I hear you on that. Keep pushing through those changes - you’ll get there!



Behold our Amazing Portfolio

Check it Out