breaking up results into varying columns

Hi zaba,

Unfortunately we're not really designers and your question is more of a general html/css question than one to do with CMSB.

Having said that, my recommendation would be to use the styling elemnt 'float:left' for the cells with a counter in php to check how many cells have been drawn and how many rows (using a foreach loop and two variables like $rows and $cells).

Each row should then be in it's own div with the width fixed to be the combined width of the number of cells in that row, centered with margins (margin: 5px auto;).

The whole layout should be in a container div of fixed width to ensure that it all sits correctly relative to each other and then does not adversely affect the surrounding elements (with an element such as "<div style='clear:both;'></div>" as the last thing before closing the container div for the brick pattern).

So to recap, we're not designers, but if you want us to look at the code you've created to do the above we could always make suggestions.

Hope this helps,

Tom

I think you misunderstood me. I can do all the css but the bricks would be generated dynamically, how can I split up the results say from 50 entries so that it pulls in 3 then 2 then 3 then 2 as the style for a brick on the first row would be different from the style of the css brick on the second row and it would alternate.

Hi zaba,

If you already have the css, then the following should work (with tweaking to suit your layout):

<?php
// Set up the variables for monitoring the row/cell
$row = 0;
$cell = 0;
$clearFloats = false;
?>
<?php
// Loop through the records we want to display
foreach ( $records as $record ) :
?>
<?php
// Check whether this is a new row
if ( !$row and ( $cell == 3 ) ) {
$row = 1;
$cell = 0;
$clearFloats = true;
}
elseif ( $row and ( $cell == 2 ) ) {
$row = 0;
$cell = 0;
$clearFloats = true;
}

// Create a new row if necessary
if ( $clearFloats ) {
echo "<div style='clear:both;'></div>";
$clearFloats = false;
}
?>
{output the cell here}
<?php
// Increment the number of cells by one
$cell = $cell + 1;
?>
<?php endforeach; ?>

With the above we loop over the records returned from CMSB and count how many cells we've drawn.

The check at the start of the loop looks for the number of cells and the current row 'type' (since you have two types of row we use 1 and 0). If the row type is 0 and we've drawn 3 cells, we change the row type to 1 and set the cell counter to 0.

The next check outputs a clearfloat div to make sure the next div being drawn appears below the previous row (rather than next to the last cell drawn).

The actual code for the cell is then outputted and afterward, the number of cells is incremented.

It's a little simplistic but has the virtue of being easily readable and easily editable (so if you want three rows of different lengths you can add another row type).

Let me know if this helps,

Tom

Hi zaba,

Are these all appearing on the same page? If so, you can add another counter before starting the foreach:

<?php $totalCells = 0; ?>

and immediately after starting the loop:

<?php
if ( $totalCells == 13 ) {
// Clear the floats
echo "<div style='clear:both;'></div>";
//close the div then open a new one
echo "</div><div>";
// reset the counter
$totalCells = 0;
}
?>

and then before closing the foreach:

<?php $totalCells = $totalCells + 1; ?>

Don't forget to close the final container div after the end of the foreach loop.

If these results are to be on different pages you can use the getRecords setting 'perPage' to set the number of results per page to 13 (use the codegenerator view for the table you want in CMSB to see how to set up links to scroll through the pages returned etc).

Let me know if this helps,

Tom

Hi Tom,

they are going to be on the same page, going to integrate it with a vertical scroller and a bit of jquery.

Hopefully it should all work when I finish putting it all together. I'll post back if I have any specific problems with actual code.
Really thanks a bunch for this!!

Tom,
I managed to piece it all together with my css and some jquery stuff to scroll it up and down. It works perfectly. Thanks for your code comments it helped me to understand what was going on and made it easy for me to work with. You guys are the best!!! Thanks again!