Thread

Hi there,

I’m trying to create stylish CSS based rows using EE.

The code I have currently reads:

{exp:channel:entries channel="testimonials"}
                        {switch='<div class="row-rt">||'}
                            <div class="{switch='col|col|col-last'}">
                                “
                                {quote_complete}
                                ”
                                {title} 
                                {job_title}
                            </div><!-- /end #col -->
                        {switch='||</div>'}
                    {/exp:channel:entries}

You can see the result here: http://training.customstudio.co.uk/testimonials

The problem is being created because the second row only has one item in it. This means EE is putting that close div further down the page and throwing out the layout.

I thought EE would be intelligent enough to realise that there’s only one item in that section and close the div there. Maybe it’s me that’s lacking intelligence to get this to work?

This seems to be a common challenge for EE sites I’m designing and building, hopefully someone has some suggestions?

Thanks in advance,

Tom

Hi Tom

Could you show us a mock-up of what you’re aiming to achieve please?

Also, you have a few HTML errors which may be breaking your layout or causing your unexpected results, see validator.w3.org

Best

hi Tom

Sorry, I actually just read your post and had a close look at your page properly. The HTML errors are minor and won’t affect the layout. Sincere apologies Tom.

(I think) the reason you’re having a problem is that your second {switch} statement is not rendering the </div> tag, so your <div class=“row-rt”> is using the WRONG </div> tag.

Make sense?

Hi Matt,

Thanks for your reply.

It does make sense.

Any idea how to get the closing div to render when there’s less than 3 items in the last row?

I’ve discovered the Modulo plugin, that may be helpful, although I’m struggling to work out how to use it.

My code is as follows:

{exp:channel:entries channel="testimonials"}
                        {switch='<div class="row-rt">||'}
                            <div class="{switch='col|col|col-last'}">
                                “
                                {quote_complete}
                                ”
                                {title} 
                                {job_title}
                            </div><!-- /end #col -->
                        {switch='||</div>'}
                        {if '{exp:modulo dividend="{count}" divisor="3"}' == '0'}
                        </div>
                    {/if}
                    {/exp:channel:entries}

I know the use of Modulo is incorrect here, but what I’m trying to do is to get Modulo to check if the number of entries is a multiple of 3, and if not, add a closing div.

There’s a related thread here, but I’m struggling to make sense of it: Related Thread

Any help is appreciated!

Tom,

I may be wrong here but if you use

{switch='<div class="row-rt">||'}

to open the div should you not be using

{switch='</div>||'}

to close it

Moving to Community Help as more appropriate there

Nice catch Tom HD, in the case of their being 2 testimonials on row two, would your switch

{switch='</div>||'}

close the div leaving the 5th testimonial outside of the row?

Hi Matt & Tom,

If I close the div using:

{switch='</div>||'}

Then I end up with:

Row start
  Item One
Row end
  Item two
  Item two

By using the two pipes on the close, it means the row div isn’t closed until the third entry.

This is great for a row containing three items, but if a row contains 1 or two items, it means there is no closing div tag created.

I’m going to try styling the items without the row, as it seems to be nothing but trouble.

Any ideas appreciated.

You could also try something like this:

<div class="row-rt">
{exp:channel:entries channel="news"}
<?php
if({count}%4 == 0){?>
</div>
<hr width="100%">
<div class="row-rt">
<?php } ?>
<div class="{switch='col|col|col-last'}">
   {count}) {title} 
</div><!-- /end #col -->
{/exp:channel:entries} 
</div>

I added the HR tag so you can see the division when you test. You can remove it if it works for you. Don’t forget to enable PHP on your template. I hope that helps.

Mike

This thread is a while old now, but we had exactly the same problem, so posting the solution here. We reached for the Modulo operator plugin for the same solution. It seemed to work, but every so often (I could find no logic to it) it just didn’t work, and 9 modulo 3 wouldn’t come out as 0.

The {switch} (as Tom originally wrote it) worked fine apart from the final row, where we might run out of entries before filling the row.

This solution seems to work for me:

{exp:channel:entries}
    {switch='<div class="row-container">||'}
    <div class="cell">
        <!-- contents -->
    </div><!-- /end .cell -->
    {if count == total_results}</div>{if:else}{switch="||</div>"}{/if}
{/exp:channel:entries}

This seems to work - the {switch} gets parsed each time whether or not the {if} calls on it.

Love you and love your work Sir! (or Mam?)

That’s “sir”. Most kind of you to say!

(...assuming you mean me…)

Rich