Skip Navigation

[Resolved] How to make row heights the same across a grid

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to limit the content of custom field so that each row display with the same height.

Solution:
To limit the content of custom field you should write custom shortcode.

You can find the proposed solution with the following reply:
https://toolset.com/forums/topic/how-to-make-row-heights-the-same-across-a-grid/#post-356857

Relevant Documentation:

This support ticket is created 6 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by Alan 6 years, 11 months ago.

Assigned support staff: Minesh.

Author
Posts
#356643
content template row heights.jpg

I am trying to: create a view to display a post archive. It's using a very simple content template showing the post title, with the featured image.

It all looks perfect unless there is a post title which is longer than average. This has the effect of pushing the title area down, and nudging the image down, making it all look messy.

Screenshot attached, you can see the third column title is longer.

It would be useful to be able to increase the title height of the other cells in that row to match the larger one.

How to do that please?

My content template is very simple:

<div class="container">
  <div class="title">
    [wpv-post-link style="text-decoration: none;"]
  </div>
  [wpv-post-featured-image size="cathposts"]
</div>

CSS:

.container {
  float: left;
  width: 31.623931623931625%;
}

.container img{
 border-radius: 0px 0px 8px 8px; 
}

.title {
  background: #F0FFFF;
  padding: 10px;
  text-align: center;
}

Is there a quick fix for this? I'm guessing it's a common issue.
thanks
Alan

#356857

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

I don't think that's a correct way to fix your issue. Instead of increasing height what I can suggest is a better solution is that you should fix the number of characters to display with your title.

If you agree on this, please add following code to current theme's functions.php file.

add_shortcode('trim', 'trim_shortcode');
function trim_shortcode($atts, $content = '') {
  $content = wpv_do_shortcode($content);
  $length = (int)$atts['length'];
  if (strlen($content) > $length) {
    $content = substr($content, 0, $length) . '&hellip;';
  }
  return $content;
}

Call it within your views as follows:

[trim length="50"][wpv-post-title][/trim]

Where:
You can adjust the number of characters using "length" attribute.

#357335

Thanks for your input Minesh, much appreciated.