modusAndrew modusAndrew - 3 months ago 10
CSS Question

Adding 'end' foundation class to div in PHP loop isn't styling it correctly

PHP newb here, so bare with me here while I try to explain.

So originally I had a bunch of large-4 columns that looked like this

<div class="large-12 columns">
<h2>Title Here</h2>
<div class="row">
<div class="large-4 columns">foo</div>
<div class="large-4 columns">foo</div>
<div class="large-4 columns">foo</div>
<div class="large-4 columns">foo</div>
<div class="large-4 columns end">foo</div>
</div>
</div>


Where it displays 3 columns then drops the fourth and fifth columns down below the first 3 and floats them left because of the 'end' class'.

I want to create the same thing using values provided via fields from my WordPress Admin panel. The field is a text box with text that is delimited by new line character. From this, in my code I create an array by exploding the field by new line character. An example looks like this

Text from field:
Foo
Bar
Bazz
Buzz

$pcv = get_post_custom_values('text_from_field');
$text_array = explode(PHP_EOL, $pcv[0]);


So now
$text_array
is equal to
[Foo, Bar, Bazz, Buzz]


With me so far?

Next I want to iterate over that array for each item in that array, I want to create a large-4 div and pump the current array value into that div. I also want to check if the current array value is the last value in the array and if so, append the 'end' class to it. That code would look like this.

<div class="large-12 columns>
<div class="row">
<?php
$pcv = get_post_custom_values('text_from_field');
$text_array = explode(PHP_EOL, $pcv[0]);
foreach ($text_array as $text) { ?>
<div class="large-4 columns <?php if($text == end($text_array)){ echo "end";} ?>">
<p><?php echo $text; ?></p>
</div>
<?php } ?>
</div>
</div>


Given that there are 5 values, it should create the same html tree I showed at the beginning of this thread, and for the most part it does. The HTML itself looks fine, including the 'end class' being added to the last large-4.

The only problem is that the 4th and 5th columns aren't being floated left. They are behaving as normal and stacking directly underneath the 3rd column. Can anyone help me figure out what I'm missing? Is there something missing from my PHP?

DOM using the loopenter image description here

Answer

This is not at all a PHP issue and is related to your use of Foundation. Foundation supports a 12 column row. What that means is that your can only add the numbers on columns to 12 this is not working because 4*5 = 20.

So what you need is to either reduce the column down to 2 (2*5=10) the end class on the last element will make this all line up.

The other option if you want to use 4 is to create another row once you hit 3 elements. Then on the last element if it does not fill a row apply an end class

What you will see in html is

<!--I assume this is in a row???-->
<div class="large-12 columns">
    <h2>Title Here</h2>
    <div class="row">
        <div class="large-2 columns">foo</div>
        <div class="large-2 columns">foo</div>
        <div class="large-2 columns">foo</div>
        <div class="large-2 columns">foo</div>
        <div class="large-2 columns end">foo</div>
    </div>
</div>

or

<!--I assume this is in a row???-->
<div class="large-12 columns">
    <h2>Title Here</h2>
    <div class="row">
        <div class="large-4 columns">foo</div>
        <div class="large-4 columns">foo</div>
        <div class="large-4 columns">foo</div>
    </div>
    <div class="row">
        <div class="large-4 columns">foo</div>
        <div class="large-4 columns end">foo</div>
    </div>
</div>