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: <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']) ?> <?php echo $record['per:label'] ?> <br><?php echo $record['utilities:label'] ?></strong><br><?php echo $record['rental_status:label'] ?> <?php echo $record['occupancy_date:label'] ?> <?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>
By Damon - October 10, 2013
Hi kitka,
Is there another URL that I can use to see the shifting occur?
When I go here:
http://www.genedeco.com/newsite/listings.php
I get redirected to here:
http://genedeco.com/?nr=2
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
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
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!
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: <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']) ?> <?php echo $record['per:label'] ?> <br><?php echo $record['utilities:label'] ?></strong><br><?php echo $record['rental_status:label'] ?> <?php echo $record['occupancy_date:label'] ?> <?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
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: <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']) ?> <?php echo $record['per:label'] ?> <br><?php echo $record['utilities:label'] ?></strong><br><?php echo $record['rental_status:label'] ?> <?php echo $record['occupancy_date:label'] ?> <?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>
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.
Tim (toledoh.com.au)