Custom formatting help

[cchiacchierini]

I have a list that groups events by date: http://www.ciderweekflx.com/index.php/events;. It works well when there are only three events per date, showing each event side by side; however, when more than four events are entered, I am getting some odd formatting. The fourth event is showing beneath the third and the fifth event is showing below the group heading. Is there a way to have the fourth, fifth, etc. events on a particular date show up as a row directly beneath the first three (to the right of the group heading space)?

Here is how I setup the default_row.php:

<div id="<?php echo $this->_row->id;?>" class="<?php echo $this->_row->class;?>">

<table>
<col width="250" />
<col width="400" />
     <tr onmouseover="this.style.backgroundColor='#fffde4'" onmouseout="this.style.backgroundColor='white'">
        <td VALIGN=TOP>
            <div STYLE="font-size: 14px;font-family:dinnext;font-weight:bold;" <?php echo @$this->cellClass['events___eventtime']; ?>>
            <?php echo @$this->_row->data->events___eventtime ;?>
            </div>
            <div id="detailseventspagetitle" <?php echo @$this->cellClass['events___detailseventname']; ?>>    
            <?php echo @$this->_row->data->events___detailseventname ;?>
            </div>
            <div STYLE="font-size: 12px;font-family:dinnext;font-weight:bold;" <?php echo @$this->cellClass['events___eventvenue']; ?>>
            <?php echo @$this->_row->data->events___eventvenue ;?>
            </div>
            <div STYLE="font-size: 12px;font-family:dinnext;font-weight:bold;" <?php echo @$this->cellClass['events___venuecity']; ?>>
            <?php echo @$this->_row->data->events___venuecity ;?>
            </div>
            <div STYLE="font-size: 12px;text-transform:none;font-family:dinnext;" <?php echo @$this->cellClass['events___eventdescription']; ?>>
            <?php echo @$this->_row->data->events___eventdescription ;?>
            </div>
            <div id="detailseventspage" <?php echo @$this->cellClass['events___details']; ?>>
            <?php echo @$this->_row->data->events___details ;?>
            </div>
        </td>
     </tr>
</table>    

</div>

UPDATE:

I temporarily changed the width in the template_css.php to allow more listings on one line:

#listform_$c .fabrik_groupheading,
#listform_$c .fabrik___heading,
.advancedSeach_$c .fabrik___heading{
    background-color: #fff;
    -moz-user-select: none;
    border-top: none;
    border-bottom-style:solid;
    border-bottom-width:2px;
    border-bottom-color:#d1232a;
    color: #d1232a;
    font-weight: normal;
    min-height: 20px;
    line-height: 19px;
    margin-left: -2px;
    text-shadow: 0 1px 0 #FFFFFF;
  zoom: 1;
    text-transform: uppercase;
    float: left;
    width:135%; [I]this is what I changed from 100%[/I]

This temp fix is okay for now, but I really need the row (November 10th for example) to go three or four across and then start a new row of three or four directly below the first three or four. Is this possible?

 

[rob]

This seems to work for me:

.fabrik_groupheading .fabrik_row:nth-child(5) {
    clear:left;
   margin-left:200px !important;
}

The nth-child selector applies the css declarations to every 5th .fabrik_row.

The clear declaration clears the div (thus starting it on a new line) and the margin left shifts it inline with the other dates.

I'm not 100% sure why its nth-child(5) though - I was expecting it to be nth-child(4) , but it seems to work with (5)

-Rob

 

[cchiacchierini]

The above worked great for one of my sites; however, I am getting strange behavior at: ciderweekva.com/events (On the November 10 listings). Any ideas?

 

[cheesegrits]

I don't see any nth-row selectors on that page?

As Rob said, you'll need an nth-row selector to handle clearing the floating for the new row.

Unless I'm being blind and you've already added that?

-- hugh

 

[cchiacchierini]

Thanks for taking a look at this. It's in there around line 202:

.fabrik_groupheading .fabrik_row:nth-child(5n) {
clear:left;
margin-left:200px !important;
}

I played around with adding other nth row selectors to solve the problem, but I can not get it right. It works for dates with one or two rows. It gets wonky when a date has 3 rows.

 

[rob]

try this:

.fabrik_groupheading .fabrik_row:nth-child(3n+5) {
clear:left;
   margin-left:200px !important;
}

 

[cchiacchierini]

Yes! Thank you.