[Resolved] Consistent item heights in Bootstrap grid View

[Author]

Posts

[larsS]

Hi Christian,

When building a view, using the "Loop Wizard," selecting the 4 column option, Bootstrap 3.0, I get a functioning loop looking like this:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row">
			<div class="col-sm-3 homecol">[wpv-post-body view_template="Loop item in Home Page Research Block"]</div> 
		[wpv-item index=other]
			<div class="col-sm-3 homecol">[wpv-post-body view_template="Loop item in Home Page Research Block"]</div>
		[wpv-item index=4]
			<div class="col-sm-3 homecol">[wpv-post-body view_template="Loop item in Home Page Research Block"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-3 homecol"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-3 homecol"></div>

	</wpv-loop>
	<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-layout-end] 

The above creates a display with two rows as per image #1, and works fine if the items displayed are of identical dimensions.

However, when the items are of varied height, it creates a not so lovely arrangement. What I would like to accomplish is an arrangement as per image #2, which uses the below code with one row and 4 columns, where the 8 varied height items arrange more pleasantly. Would you kindly show me how to write the loop for example 2?

Aloha,

Lars

<div class="row" style="padding: 15px">

<div class="col-md-3 main-home">
<div class="news-frame-main">
<div class="chemnews-header">Off-the-Grid Greenhouses</div>
<a href="off-the-grid-greenhouses"><img src="h#" /></a> 
<p class="chemnews-blurb">In many ways, greenhouses are not all that green. Plants require only certain wavelengths of light to grow, which means...</p>
</div>
<div class="news-frame-main">
<div class="chemnews-header">Metal Chelating Antibiotic</div>
<a href="metal-chelating-antibiotic"><img src="#" /></a> 
<p class="chemnews-blurb">New antibiotic therapies are in dire need to combat increasing antibiotic resistance. Small molecules produced by microorganisms...</p>
</div>
<div class="news-frame-main">
<div class="chemnews-header">Metal Chelating Antibiotic</div>
<a href="metal-chelating-antibiotic"><img src="#" /></a> 
<p class="chemnews-blurb">New antibiotic therapies are in dire need to combat increasing antibiotic resistance. Small molecules produced by microorganisms...</p>
</div>
</div>

<div class="col-md-3 main-home">
<div class="news-frame-main">
<div class="chemnews-header">Interference Removal</div>
<a href="do-not-publish-yetinterference-removal"><img src="#" /></a> 
<p class="chemnews-blurb">Due to its high spatiotemporal resolution, fast-scan cyclic voltammetry, FSCV, at carbon-fiber microelectrodes enables the localized...</p>
</div>
<div class="news-frame-main">
<div class="chemnews-header">Write Like a Chemist</div>
<a href="write-like-a-chemist"><img src="#" /></a> 
<p class="chemnews-blurb">The necessity of technical writing often first becomes pronounced during a chemist's graduate studies. Beyond writing...</p>
</div>
<div class="news-frame-main">
<div class="chemnews-header">Metal Chelating Antibiotic</div>
<a href="metal-chelating-antibiotic"><img src="#" /></a> 
<p class="chemnews-blurb">New antibiotic therapies are in dire need to combat increasing antibiotic resistance. Small molecules produced by microorganisms...</p>
</div>
</div>	

<div class="col-md-3 main-home">
<div class="news-frame-main">
<div class="chemnews-header">STEM Grant</div>
<a href="stem-grant"><img src="#" /></a> 
<p class="chemnews-blurb">A $300,000 grant from the Clare Boothe Luce Program will support three new graduate fellowships for women...</p>
</div>
<div class="news-frame-main">
<div class="chemnews-header">Collagen Scaffold</div>
<a href="collagen-scaffold"><img src="#" /></a> 
<p class="chemnews-blurb">The human small intestinal epithelium possesses a distinct crypt-villus architecture and tissue polarity in which proliferative cells...</p>
</div>
<div class="news-frame-main">
<div class="chemnews-header">Write Like a Chemist</div>
<a href="write-like-a-chemist"><img src="#" /></a> 
<p class="chemnews-blurb">The necessity of technical writing often first becomes pronounced during a chemist's graduate studies. Beyond writing...</p>
</div>
</div>

<div class="col-md-3 main-home">
<div class="news-frame-main">
<div class="chemnews-header">Tobacco Research</div>
<a href="tobacco-research"><img src="#" /></a> 
<p class="chemnews-blurb"><p>The rapid release of new tobacco products requires high-throughput quantitative methods to support tobacco research. Sample preparation for LC-MS and GC-MS is time consuming and limits throughput...</p>
</div>
<div class="news-frame-main">
<div class="chemnews-header">Dynamic Electron Transfer</div>
<a href="dynamic-electron-transfer"><img src="#" /></a> 
<p class="chemnews-blurb">Excited-state electron-transfer reactions are of essential importance as they provide a means to convert solar energy into stored potential energy and...</p>
</div>
<div class="news-frame-main">
<div class="chemnews-header">Off-the-Grid Greenhouses</div>
<a href="off-the-grid-greenhouses"><img src="#" /></a> 
<p class="chemnews-blurb">In many ways, greenhouses are not all that green. Plants require only certain wavelengths of light to grow, which means...</p>
</div>
</div>
</div>

[Christian Cox]

Hi, I'm not able to see the images but I think I can understand what you want to accomplish. You want to have all the items in a row set to a fixed height so the rows don't break unevenly. I don't think you need to do anything in the Loop to achieve this, it can be accomplished best with CSS. The general idea is that you give each column item a fixed height, then truncate the content inside it if necessary so it does not spill out of the vertical height. Something like this:

.main-home {
  height: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

This is just an example, and I would have to see it in the browser to make further recommendations.

[larsS]

Dear Christian,

I am trying the images one more time... I do think this is a Loop issue..

Img1 is the desired format, which I can hardcode, but then is static.

Img2 shows the only option offered by the Loop Wizard.

Aloha,

Lars

[Christian Cox]

Okay yes, this is what I suspected you were describing. There is no option in the Loop Wizard that will create this design for you, because it's fairly complex when responsive design is involved. The simplest option is to use CSS like I mentioned to force a single, static height for all "cells" in the View. The CSS will truncate the contents of each "cell" vertically using ellipses (...) if the height of the content exceeds the static height of its cell. You could choose a height that is taller than most items, and never see the ellipses, but that would probably cause empty space to appear below the shorter elements.

The other option is to write custom JavaScript that loops over each row after the page is rendered, determines which item in the row is tallest, and applies that height to all the items in the row. This gets around the truncation issue, but it's more complex, especially when responsive design comes into play. I don't have a simple script to offer you that will perform that type of calculation. If you have a problem with the CSS I recommended, I'll need to see it in the browser to make suggestions.

[larsS]

Dear Christian,

Thank you for your expertise! Although your answer is not the one I hoped for, it helped me save hours and hours of trying to make this work =)

I will use your truncation snippet - that should do the trick.

Aloha,

Lars