[Resolved] Compare Headings not aligning

[Author]

Posts

[alishiaM]

Tell us what you are trying to do?
Dear Toolset team. I am testing the compare function on a test site and want to use it on my main site later if working correctly. The compare function works perfectly. But because I am pulling the compare data from a Custom post type with custom fields with different length of information, the headings is not lining up. - see image. What would be the best and easiest way to get the headings to always line up no matter which post type is selected for the comparison? Thank you

Is there any documentation that you are following?
https://toolset.com/learn/create-an-ecommerce-wordpress-site/product-comparison/#comparison-results

Is there a similar example that we can see?
On my main site I used a plugin called" Alike" and the comparison line up, (see: hidden link) but I want to use the toolset method.

What is the link to your site?
My test site is: hidden link

Thank you
Alishia

[Shane]

Hi Alishia,

In reality this would be very difficult to achieve because you will need to set a fixed height for the headings so that this fixed height will be maintained.

The really issue now is to how you will determine that fixed height since it will won't always be the same items you are comparing.

What will happen is that you will be left with large amounts of empty spaces even if there is little or no data in the space.

Right now the best solution is for a fixed height but it has to be determined by a single post with the maximum number of options so that you can see what is the maximum height that a heading will have.

Thanks,
Shane

[alishiaM]

Thanks Shane. How would you set a fixed height for every individual custom heading in the Loop item? I attached a jpeg of my current template.

[Shane]

Hi Alishia,

Since you didn't define a specific class for the area where the content is rendered then you will need to do this.

<p class="fixed-height">types shortcode here</p>

Then you will style the fixed height like this.

.fixed-height{
height: 200px;
}

Thanks,
Shane

[alishiaM]

My issue is resolved now. Thank you!