Pricing Table height issue

Question

I have installed pricing table plugin in my web page. It works fine. But I have faced the height issue problem. Please see the screenshot image. Th detail content is very long compared to others. So other sections were misaligned. All the sections are collapsed. Please help me. Thanks.

Answer 1

This jQuery will get the max height of each li row and set the height to be the same on every li on each row:

Array.max = function( array ){
    return Math.max.apply( Math, array );
};
for (i = 0; i < $("ul li").length; i++) {
//updated as per Sime Vidas comment.
var heights= $("ul li:nth-child(" + (i) + ")").map(function() {
    return $(this).height();
}).get();
var maxHeight = Array.max(heights);
$("ul li:nth-child(" + (i) + ")").css("height", maxHeight);
​}​

Here is an update to your Fiddle: http://jsfiddle.net/PR9am/1/

Hope it helps.

Answer 2

You can simply add two extra lines to the details list item

<li><br>Detail<br>&nbsp;</li>

This will put the next row in line with the rest