[Resolved] How to make Views columns equal height

[Author]

Posts

[CommMgr]

I created a page using Views that lists products in columns using a Bootstrap grid. Each product is in its own table, and the table has a border. The code is working perfectly.

I need to make those tables equal heights based on content, not based on a fixed height (see screenshot for reference).

I have attempted to use an equal height script code (that works on other areas of my site) integrated in the head of my site, and when that didn't work, I put the code in the View JS section. That also didn't work.

I'm obviously missing something.

I appreciate your help with this issue.
CommMgr

Page url for reference hidden link

[Shane]

Hi Chris,

Can you try using this css ?

.row [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row{
  overflow: hidden; 
}

Please try and let me know if this helps.
Thanks,
Shane

[CommMgr]

Hey, Shane...

Thank you for your reply. That css code did nothing.

I have a screenshot of what I am needing. I need the bottom of the tables of each row to be equal height, no matter the content.

For reference, here is the code I'm using in my View.

LOOP EDITOR CODE

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="row " style="clear: both;">
			<div class="col-sm-4">[wpv-post-body view_template="loop-item-in-new-product-showcase"]</div>
		[wpv-item index=other]
			<div class="col-sm-4">[wpv-post-body view_template="loop-item-in-new-product-showcase"]</div>
		[wpv-item index=3]
			<div class="col-sm-4">[wpv-post-body view_template="loop-item-in-new-product-showcase"]</div>
		</div>
		[wpv-item index=pad]
		[wpv-item index=pad-last]
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
[wpv-layout-end]

TEMPLATE CODE

<table class="nps-table" width="100%" style="border-collapse: collapse; border: 1px solid #9A9A9A; margin-bottom: 35px;" cellspacing="0">
 <tbody>
  <tr>
   <td align="center" valign="middle" style="text-align: center; background-color: #58595B; padding: 3px 5px; color: #ffffff; font-size: 18px; line-height: 1.3em;">[types field="category"][/types]</td>
  </tr>
  <tr>
   <td style="line-height: 1em; text-align: center; background-color: #58595B; padding: 0 0;"><a href="[types field="ebooth-url" raw="true"][/types]" target="_blank">[types field="product-photo"][/types]</a></td>
  </tr>
  <tr>
   <td align="center" valign="middle" style="padding: 0 0; background-color: #58595B;" height="50">
    <div style="padding: 5px 5px; color: #ffffff; font-size: 16px; line-height: 1.3em; text-align: center; background-color: #58595B;">
     [types field="product-name"][/types]</div></td>
  </tr>
  <tr>
   <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" style="margin-bottom: 0;">
 <tbody>
  <tr style="padding: 0 0;">
   <td class="nps-container" align="center" valign="middle" style="line-height: 1em; padding: 15px 5px 5px; text-align: center;"><a href="[types field="ebooth-url" raw="true"][/types]" target="_blank">[types field="exhibitor-logo"][/types]</a></td>
  </tr>
  <tr>
   <td align="center" valign="middle" style="font-size: 18px; line-height: 1.4em; padding: 0 0 10px; text-align: center;">BOOTH #[types field="booth"][/types]</td>
  </tr>
  <tr>
   <td align="left" valign="top" style="font-size: 15px; line-height: 1.4em; padding: 0 10px 10px; text-align: left;">[types field="product-description"][/types]</td>
  </tr>
 </tbody>
</table>

   </td>
  </tr>
  
 </tbody>
</table>

Thank you for your assistance.
CommMgr

[Shane]

Hi Chris,

Thank you for sharing the layout of this. It helped me to understand the design better.

So to fix this you're going to need to set a fixed height for the <td></td> that contains the content. This way each one is the same uniformed height.

Take a look here at this example.
hidden link

This should allow you to achieve exactly this.

Please let me know if this helps.
Thanks,
Shane

[CommMgr]

Hi, Shane...

As I mentioned initially, a fixed height is not what I want to use as the listings all have different amounts of content and also the height will vary depending on mobile devices. That is why I use equal height script for other elements on my site.

For reference, this is the script I normally use

<script type="text/javascript">
(function($) {

$(window).load(function() {
equal_height($('.UNIQUE_CLASS_HERE '));
});

function equal_height(group) {
var tallest = 0;
$(group).attr('style', '');
group.each(function() {
var this_height = $(this).height();
if(this_height > tallest) {
tallest = this_height;
}
});
group.height(tallest);
}

})(jQuery);
</script>

For some reason, this code does not work with View. I have put the code in my site head integration and also put it in the JS tab on the View. Neither worked.

Bottom line, fixed height is not what I want for this page. I need an equal height code that works.

I appreciate you helping me to figure this out.
CommMgr

[Shane]

Hi Chris,

Thank you for the clarity.

But without context I cannot assess this code. Does it work for the table setups that you have elsewhere?

I understand that you want all your items to be the same height as the one with the highest height.

Please let me know this.

Thanks,
Shane

[CommMgr]

Hi, Shane...

I worked on my code over the weekend and got it to work.

Thanks...
CommMgr

[CommMgr]

My issue is resolved now. Thank you!