Weird Shifting

7 posts by 3 authors in: Forums > CMS Builder
Last Post: October 10, 2013   (RSS)

By kitka - October 10, 2013

 I am trying to get a results  of listing posted in four columns... as shown on the link below

Here is a sample page of the listings as working
http://www.genedeco.com/newsite/listings.php

I am using Foundation 12 column grid system...
The problem i get is when i shuffle listings around ie sort order  get gap spacing.
ie some orws have all four listings across and some 3 or 4  then a row with two then four etc....

 The code i am using  is as follows...

Can someone see if perhaps i am doing something wrong in my code to get this erractic results..

I am thinking it has to do with  the line
<?php $maxCols=4; if (@++$count % $maxCols == 6): ?></div><?php endif; ?> or soemthing like that.

Here is the code...

<div class="row">
<div class="twelve columns">
<font size="+1"color="#660000"><strong>Our Newest Additions...<hr></strong></font>

<?php foreach ($listingsRecords as $record): ?>
<?php foreach ($record['main_image'] as $index => $upload): ?>
<div class="three columns"><font face="Arial,Helvetica,sans-serif" size="-1">Location: &nbsp;<strong><?php echo $record['content'] ?></strong></font><br/><br>
<a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" border="0" /></a><br><br>
<font face="Arial,Helvetica,sans-serif" size="-1"><?php echo $record['property_type:label'] ?><br><strong>$<?php echo htmlencode($record['price']) ?>&nbsp;<?php echo $record['per:label'] ?>&nbsp;<br><?php echo $record['utilities:label'] ?></strong><br><?php echo $record['rental_status:label'] ?>&nbsp;<?php echo $record['occupancy_date:label'] ?>&nbsp;<?php echo $record['occupany_date_day:label'] ?></font><br/><br><br><br></div>
<?php $maxCols=4; if (@++$count % $maxCols == 6): ?></div><?php endif; ?>
<?php endforeach ?>
<?php endforeach ?>
<?php if (!$listingsRecords): ?>
<strong>Sorry we have nothing matching your description at this time</strong><br/><br/>
<?php endif ?>

</div>

jim albert

By kitka - October 10, 2013

Silly me...

wrong URL
http://www.genedco.com/newsite/listings.php

These are lined up ok right now but if i change the listing around i get gaps...

Bizarre

jim albert

By Damon - October 10, 2013

Hi again,

Everything does look lined up now and you mention but that makes it more difficult to determine the issue.

One thing I did notice on the published page is that <div class="row"> on line 325 doesn't have a closing div.

Also, after the 4th listing, you should insert a <br clear="left">
.
Can you try adding both and let me now the results?

Thanks!

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By kitka - October 10, 2013

ok i removed the first <div class=twelve columns">

doesnt seem to cha nge anything and added the <br clear>  SO THE CODE NOW LOOKS LIKE THIS ...

<div class="row">

<font size="+1"color="#660000"><strong>Our Newest Additions...<hr></strong></font>

<?php foreach ($listingsRecords as $record): ?>
<?php foreach ($record['main_image'] as $index => $upload): ?>
<div class="three columns"><font face="Arial,Helvetica,sans-serif" size="-1">Location: &nbsp;<strong><?php echo $record['content'] ?></strong></font><br/><br>
<a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" border="0" /></a><br><br>
<font face="Arial,Helvetica,sans-serif" size="-1"><?php echo $record['property_type:label'] ?><br><strong>$<?php echo htmlencode($record['price']) ?>&nbsp;<?php echo $record['per:label'] ?>&nbsp;<br><?php echo $record['utilities:label'] ?></strong><br><?php echo $record['rental_status:label'] ?>&nbsp;<?php echo $record['occupancy_date:label'] ?>&nbsp;<?php echo $record['occupany_date_day:label'] ?></font><br/><br><br><br clear="left"></div>
<?php $maxCols=4; if (@++$count % $maxCols == 6): ?></div><?php endif; ?>
<?php endforeach ?>
<?php endforeach ?>
<?php if (!$listingsRecords): ?>
<strong>Sorry we have nothing matching your description at this time</strong><br/><br/>
<?php endif ?>

</div>

If you go to 
http://www.genedco.com/newsite/listings45b.php

Do a search with  LOCATION :COBURG     BEDRROMS  2   AND    PARKING ON sITE   CHECKED     you will see the gap i am talking about IN THE RESULTS

jim albert

By kitka - October 10, 2013

AS A followup to my previous reply 10 mins ago...

If you go to
http://www.genedco.com/newsite/listings45b.php

 and do a SEARCH  with just the Parking ON SITE checked you will see the gaps io am talking about in the results.

Again the code is as follows:

<div class="row">

<font size="+1"color="#660000"><strong>Our Newest Additions...<hr></strong></font>

<?php foreach ($listingsRecords as $record): ?>
<?php foreach ($record['main_image'] as $index => $upload): ?>
<div class="three columns"><font face="Arial,Helvetica,sans-serif" size="-1">Location: &nbsp;<strong><?php echo $record['content'] ?></strong></font><br/><br>
<a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" border="0" /></a><br><br>
<font face="Arial,Helvetica,sans-serif" size="-1"><?php echo $record['property_type:label'] ?><br><strong>$<?php echo htmlencode($record['price']) ?>&nbsp;<?php echo $record['per:label'] ?>&nbsp;<br><?php echo $record['utilities:label'] ?></strong><br><?php echo $record['rental_status:label'] ?>&nbsp;<?php echo $record['occupancy_date:label'] ?>&nbsp;<?php echo $record['occupany_date_day:label'] ?></font><br/><br><br><br clear="left"></div>
<?php $maxCols=4; if (@++$count % $maxCols == 6): ?></div><?php endif; ?>
<?php endforeach ?>
<?php endforeach ?>
<?php if (!$listingsRecords): ?>
<strong>Sorry we have nothing matching your description at this time</strong><br/><br/>
<?php endif ?>

</div>

jim albert

By Toledoh - October 10, 2013

The issue is that the last item in the row is shorter in height that the previous... so floating comes in under it rather than clearing.

If you add a class to like <div class="three columns fixed"> then add to your css file:   .fixed{ height:200px;}  or something similar, you will force all those items to be the same height, and then it will lay out properly.

The issue is going to when your screen goes smaller - your media queries will have to be adjusted to it looks right on mobile etc.

Cheers,

Tim (toledoh.com.au)