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 8 years, 3 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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: Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Alan 8 years, 3 months ago.

Assisted by: Minesh.

Author

Posts

January 3, 2016 at 5:25 pm #356643

Alan

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

January 4, 2016 at 2:13 pm #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.

January 5, 2016 at 11:53 pm #357335

Alan

Thanks for your input Minesh, much appreciated.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.