Channel Loops, Conditional Statements, Grids and Whitespace. Also Goofy Weirdness.
How Do I?
I’m running into a bizarre issue with EE that I’ve never noticed before (using v2.10.1). I’m using a “justified” grid where you set your column container to text-align: justify, give them the right width and they float themselves without having to deal with margins and all that mess.
Works great in my static code until I start using channel:entries loops.
Here’s how it should look:
<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 is stripping the whitespace and the end of each column so that they all end up on the same line which totally jacks up the spacing/floating that the justified grid does.
<div class="col-wrapper col2">
{exp:channel:entries channel="channel"}
{if any_conditional}{/if}
<div class="col"></div>
{/exp:channel:entries}
</div>Gives me:
<div class="col-wrapper col2">
<div class="col"></div><div class="col"></div>
</div>I’ve tried adding an
after the last dive inside the channel loop, and that helps, but it adds extra space and makes the grid end up being off enough that it’s really frustrating.
What’s going on here? Is there a way to make EE stop stripping this linebreak/whitespace out?
Help!
I’d have a look at your grid CSS, having multiple DIV’s in a row with no spaces in the HTML is all valid of course, and what you’d get if you minimise your HTML as well.
I’m with Rob here, can you show us some more of your code, perhaps a link? Whitespace in your code really shouldn’t be an issue, and it certainly shouldn’t affect your layout.
It’s certainly valid HTML, but my question is why does EE strip out this space only if a conditional is used in the channel loop and is there a way to make it stop?
As I’ve said, can you give us a little more to work with? A bit more of your code, including the actual conditional and some tags would work. Call it a minimal working example, if you will. In fact it’s probably a good idea to stick your EE tag in a separate template for debugging purposes.
We’re using this for our grid: http://www.barrelny.com/blog/text-align-justify-and-rwd/
And yes, unfortunately if all the sections end up on the same line they will bunch up together (see http://codepen.io/patrickkunka/pen/bxyqw, go in and make some of the li elements on the same line)
This is about as simple as I can make it:
{exp:channel:entries channel="community" disable="member_data|pagination|trackbacks|category_fields" dynamic="off" limit="8"}
<div class="col callout quip">
<article>
<h6>{categories limit="1"}{category_name}{/categories}</h6>
<h3>{title}</h3>
<a href="http://{page_url}class=more-alt">Read More</a>
</article>
</div>
{/exp:channel:entries}This turns out fine, but if I have even the simplest conditional (i.e. {if custom_field}{/if}) inside the loop anywhere it pulls the div up on the same line as the closing div.
So where do the <li> items come from? You may need some whitespace, perhaps, but it doesn’t have to be a linebreak, a space after <li> will do just as well. I think you should also use
{if custom_field != ""}{custom_field}{/if]Sorry Ingmar, I guess I was a bit confusing there 😊
So the <li> elements are in the codepen link I shared. That’s the HTML/CSS for the grid. They just happened to use a list instead of divs for the boxes.
The issue is really more of the fact that each column needs to be on it’s own line in the HTML. Even though I have a new line in my code, EE is removing it whenever I use a conditional statement. Honestly, it looks like it might be a bug or something.
I can’t use a line break because that makes all the elements on their own line. And adding a bit of whitespace messes it up as well. I just need EE to respect my HTML. It always has, and this is bizarre exception.
Finally made some progress on this. Found a conversation in StackExchange where they talked about enabling PHP and adding a blank echo to the end of the loop. Which worked, but I didn’t want to enable PHP for every template with a grid.
Thankfully Low Replace can do the same thing with a tag:
{exp:low_replace find="SPACE" replace="NEWLINE"} {/exp:low_replace}