php ternary operator strange result

[kixe]

Need some help. Following works as expected

foreach ($page->children as $member)  {
    $key = $member->siblings->getItemKey($member)+1;
    if ($member == $member->siblings->last()) $rowend = "</div>\n";
    elseif ($key%3 == 0) $rowend = "</div><div class=\"row\">\n";
    else $rowend = '';
}

ternary operator should do the same but brings different result. What is wrong? Cannot see it.

foreach ($page->children as $member)  {
    $key = $member->siblings->getItemKey($member)+1;
    $rowend = ($member == $member->siblings->last())?"</div>\n":($key%3 == 0)?"</div><div class=\"row\">\n":'';
}

[horst]

$rowend = $member == $member->siblings->last() ? "</div>\n" : ( $key%3 == 0 ? "</div><div class=\"row\">\n" : '' );
                                                 ----------   ^--------------------------------------------------^

not tested but I'm pretty sure.

You use surrounding braces where not needed, but not where they are needed. 

[teppo]

Horst is right, as far as I can tell, but I'd also like to point out that stacked ternary expressions are a PITA. PHP manual itself suggests avoiding them, and so would I -- not only does your first example work, it also looks better and is much easier to read than the latter one.

Getting everything on one line is hardly a goal worth striving for

For more details I'd suggest taking a look at http://php.net/language.operators.comparison#language.operators.comparison.ternary and specifically the part about stacked expressions, "non-obvious ternary behaviour".

[kixe]

Thanks for the quick help.

[Martijn Geerts]

One thing to mention about most CSS grid systems is that they work with floats and row markup. Sometimes you need to clear the float, and always you need to prevent box-collapsing. All this brings extra logic (as seen above) what is not really needed if you ask me unless you've to support IE7 and below.

Since a year or so I use inline-blocks for grids. With the use of inline-block, you can rid of the whole row element in your grid system and as a bonus you could align columns vertically with the vertical-align property. 'vertical-align: middle' is particularly usefull for grids of logo's and images.

// the float way
<div class='container'>
    <div class='row'>
        <div class='col-50'>
           <p>Donec sed odio dui.</p>
        </div>
        <div class='col-50'>
           <p>Donec sed odio dui.</p>
        </div>
    </div>
    <div class='row'>
        <div class='col-50'>
           <p>Donec sed odio dui.</p>
        </div>
        <div class='col-50'>
           <p>Donec sed odio dui.</p>
        </div>
    </div>
</div>

// the inline-block way
<div class='container'>
    <div class='col-50'>
       <p>Donec sed odio dui.</p>
    </div>
    <div class='col-50'>
       <p>Donec sed odio dui.</p>
    </div>
    <div class='col-50'>
       <p>Donec sed odio dui.</p>
    </div>
    <div class='col-50'>
       <p>Donec sed odio dui.</p>
    </div>
</div>

One disadvantage of the inline-block grid is that the grid should not contain white space characters as those take up space. There are 2 ways to solve those:

1. don't use white-space characters.

2. set the font-size in the grid to font: 0/0 a;

I always go for option 1. as option 2 eliminates the right usage of ems for fonts inside the grid. Due to ProcessWire it's really simple to not write HTML at all, never escaping PHP. This is how I build my HTML and why there are no whitespace characters in my HTML where it is not needed.

A good example of a inline-block grid systems is Griddle, I never have used that one but the idea is exactly the same as my own handcrafted CSS.

[owzim]

I don't ever use the ternary operator for stuff with more condition level, if that's what it's called. It's just not readable at all, and I think without setting brackets properly the result can be unexpected.

Only ever one ? and one :