Layout problem (not sure if this is CMSB related!)

6 posts by 3 authors in: Forums > CMS Builder
Last Post: August 30, 2016   (RSS)

Hi, All.

I did a version of my client's page before adding CMSB, which you can see here: http://www.commonsensedesign.net/extranet/icc/about-counsellors.php. On a wide screen, there are two rows of four columns. When I adapted this to work with CMSB, the columns don't align properly: http://interfaithcounselling.ca/about-counsellors.php.

Please see attached screengrabs.

I've also attached a static version of the page - which lays out as it's supposed to - and the CMSB version (about-counsellors.php).

Any suggestions, please?

======

Static code:

<!-- Blog Page Post Area Start -->
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Full Area Post Start -->
<div class="full-area-blog-post">
<div class="full-area-thumb"><p><br>&nbsp;<br></p><img src="img/team-lisa-akey.jpg" alt=""><br>&nbsp;<br></div> <div class="full-area-post-title-meta">
<h4 class="blog-post-title">LISA AKEY, Executive Director<br>Honours Psych, MSW, RSW</h4>
</div>
<ul>
<li>15+ years working in children's mental health residential treatment, including Clinical Director of Pioneer Youth Services and House of Friendship addictions services</li>
<li>Lisa is certified in Alternative Dispute Resolution and Mediation</li>
<li>With Interfaith since 2010. </li>
</ul><br>&nbsp;<br>
</div>
<!-- Full Area Post End -->
</div>

======

CMSB code:

<!-- Blog Page Post Area Start -->
<?php foreach ($meet_our_counsellorsRecords as $record): ?>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Full Area Post Start -->
<div class="full-area-blog-post">
<div class="full-area-thumb"><p><br>&nbsp;<br></p>
<?php foreach ($record['portrait'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" alt="<?php echo htmlencode($record['title']) ?>" />
<?php endforeach ?>
<br>&nbsp;<br></div>
<div class="full-area-post-title-meta"><h4 class="blog-post-title"><?php echo htmlencode($record['title']) ?>&nbsp;<?php echo htmlencode($record['job_title']) ?>
<br><?php echo htmlencode($record['qualifications']) ?></h4></div>
<?php echo $record['content']; ?>
<br>&nbsp;<br>
</div>
<!-- Full Area Post End -->
</div>
<?php endforeach ?>
<!-- Blog Page Post Area End -->

By Steve99 - August 29, 2016

Hello,

Definitely not CMSB related. It's HTML/CSS/Content.

The issue you're seeing is related to the amount of content per column container. Since you have one row with all the "col" containers within, they wrap and float left.

In "desktop view" the 5th bio listing is being "caught up" by the 2nd bio listing. (you can see this by using the Web Developer tools built into the browser and enabling the Outline of Block Elements, and comparing the pre and post pages you posted - you can see the amount of content within the bio box has changed).

There are different ways you could approach this. One would be to use PHP increment and output a close/open div for another row every 4 listings (this would help for the desktop view - but you may possibly run into a container getting "caught up" on the tablet view with the collapsing responsive layout). Could try min/max height values for the bio listings as well. Many other CSS/HTML solutions as well.

Hope this helps!

Cheers,
Steve

By Toledoh - August 29, 2016

FYI.  I use http://brm.io/jquery-match-height/ for this issue.  Rather than fixing a height, this identifies the highest div, then makes the others in that row the same height.

Cheers,

Tim (toledoh.com.au)

By Steve99 - August 30, 2016

Good resource Tim, bookmarked - thanks for sharing. We've also used flexbox with BS for similar needs (some with a JS fallback though).

Cheers,
Steve

Thanks, Toledoh! I'll look into this.