How to make two cards the same height

How can I make two cards for Black African Players and for White Players the same height All those cards is using the same class is there perhaps a way to make it the same height

div.card {
    overflow: hidden;
}

.card {
    width: 100%;
    padding: 9px 20px 9px 20px;
    margin-bottom: 0px;
    background: #ffffff;
    box-shadow: 1px 1px 1px #dfdfdf;
    box-sizing: border-box;
    height: 100% !important;

You’ll need to show us your mark-up and more of the CSS if anyone is to be able to help you @graemerichard

Here is the code that creates the cards

targetHeight = 0;
        //Card height
        $("div.card", $(_context)).not(".detail").css("height", "auto");
        $("div.card:not(.detail) .chart", $(_context)).each(function () {
            $(this).css({ "width": $(this).parents(".cell").width() - 40 });
            try {
                $("svg", $(this)).css({ "height": "auto" });
                $(this).css({ "height": "auto" });
                $(this)[0].__chartist__.update();
            } catch (e) { }
        });

        totalHeight = 0;
        if ($(".lg-1-2").length > 0) {
            for (i = 0; i < $(".lg-1-2 div.card", $(_context)).not(".detail").length; i++) {
                $one = $($(".lg-1-2 div.card", $(_context))[i]);
                $two = $($(".lg-1-2 div.card", $(_context))[i + 1]);
                if (i % 2 == 0) {
                    targetHeight = 0;
                    if ($one.outerHeight() > targetHeight) {
                        targetHeight = $one.outerHeight();
                    }
                    if ($two.outerHeight() > targetHeight) {
                        targetHeight = $two.outerHeight();
                    }
                    $one.css("height", targetHeight);
                    $two.css("height", targetHeight);
                    totalHeight = totalHeight + (targetHeight * ($(".lg-1-2 div.card", $(_context)).not(".detail").length - 2));
                }
            };
            var contentHeight = $(window).outerHeight() - ($("div.application > div.view > div.header").outerHeight() + $("div.controls").outerHeight() + $("div.footer").outerHeight() + 81);
            //var cardsHeight = ($("div.card", $(_context)).not(".detail").height() * ($("div.card", $(_context)).not(".full").not(".detail").length / 2)) + $(_context.find("button.heading")).outerHeight() + $(_context.find("div.chart-name")).outerHeight() + 19;
            var cardsHeight = totalHeight + (($(_context.find("button.heading")).outerHeight() + $(_context.find("div.chart-name")).outerHeight()) + 37);
            var fulllHeight = contentHeight > cardsHeight ? contentHeight : cardsHeight;
            _context.find("div.full").css({ "height": fulllHeight });

            var halfHeight = (fulllHeight - $(_context.find("button.heading")).outerHeight() - $(_context.find("div.chart-name")).outerHeight() - 36) / (($("div.card", $(_context)).not(".full").length % 2) + 2);
            contentHeight > cardsHeight ? $("div.card", $(_context)).not(".full").not(".detail").css({ "height": halfHeight }) : "";
        } else if ($(".lg-1-3").length > 0) {
            for (i = 0; i < $(".lg-1-3 div.card", $(_context)).not(".detail").length; i++) {
                $one = $($(".lg-1-3 div.card", $(_context))[i]);
                $two = $($(".lg-1-3 div.card", $(_context))[i + 1]);
                $three = $($(".lg-1-3 div.card", $(_context))[i + 2]);
                if (i % 3 == 0) {
                    targetHeight = 0;
                    if ($one.outerHeight() > targetHeight) {
                        targetHeight = $one.outerHeight();
                    }
                    if ($two.outerHeight() > targetHeight) {
                        targetHeight = $two.outerHeight();
                    }
                    if ($three.outerHeight() > targetHeight) {
                        targetHeight = $three.outerHeight();
                    }
                    $one.css("height", targetHeight);
                    $two.css("height", targetHeight);
                    $three.css("height", targetHeight);
                    totalHeight = totalHeight + targetHeight;
                }
            };
            var contentHeight = $(window).outerHeight() - ($("div.application > div.view > div.header").outerHeight() + $("div.controls").outerHeight() + $("div.footer").outerHeight() + 81);
            //var cardsHeight = ($("div.card", $(_context)).not(".detail").height() * ($("div.card", $(_context)).not(".full").not(".detail").length / 2)) + $(_context.find("button.heading")).outerHeight() + $(_context.find("div.chart-name")).outerHeight() + 19;
            var cardsHeight = totalHeight + (($(_context.find("button.heading")).outerHeight() + $(_context.find("div.chart-name")).outerHeight()) + 37);
            var fulllHeight = contentHeight > cardsHeight ? contentHeight : cardsHeight;
            _context.find("div.full").css({ "height": fulllHeight });

            var halfHeight = (fulllHeight - $(_context.find("button.heading")).outerHeight() - $(_context.find("div.chart-name")).outerHeight() - 36) / (($("div.card", $(_context)).not(".full").length % 2) + 2);
            contentHeight > cardsHeight ? $("div.card", $(_context)).not(".full").not(".detail").css({ "height": halfHeight }) : "";
            //            _context.find("div.card").not(".detail").css({ "min-height": halfHeight });
            //            _context.find("div.full").not(".detail").css({ "min-height": halfHeight * ($("div.card", $(_context)).not(".full").length / 2) });
        } else {
            $("div.card", $(_context)).not(".full").not(".detail").each(function () {
                if ($(this).outerHeight() > targetHeight) {
                    targetHeight = $(this).outerHeight();
                }
            });
            _context.find("div.card").not(".detail").css({ "height": targetHeight });

            var contentHeight = $(document).outerHeight() - ($("div.application > div.view > div.header").outerHeight() + $("div.controls").outerHeight() + $("div.footer").outerHeight() + 81);
            var cardsHeight = ($("div.card", $(_context)).not(".detail").height() * ($("div.card", $(_context)).not(".full").not(".detail").length / 2)) + $(_context.find("button.heading")).outerHeight() + $(_context.find("div.chart-name")).outerHeight() + 19;
            cardsHeight = 0;

            var fulllHeight = contentHeight > cardsHeight ? contentHeight : cardsHeight;
            _context.find("div.full").css({ "height": fulllHeight });

            var halfHeight = (fulllHeight - $(_context.find("button.heading")).outerHeight() - $(_context.find("div.chart-name")).outerHeight() - 36) / (($("div.card", $(_context)).not(".full").length % 2) + 2);
            $("div.card", $(_context)).not(".full").not(".detail").css({ "height": halfHeight, "min-height": halfHeight });
            _context.find("div.card").not(".detail").css({ "min-height": halfHeight });

            _context.find("div.full").not(".detail").css({ "min-height": halfHeight * ($("div.card", $(_context)).not(".full").length / 2) });
        }

        $("div.card:not(.detail) .chart", $(_context)).each(function () {
            var multichart = $($(this).parents(".charts").children()[1]).children().length;
            try {
                if ($(this).attr("id").indexOf("Chart_Pie_") != -1 || $(this).attr("id").indexOf("Chart_Overall_") != -1) {
                    $("svg", $(this)).css({ "height": "100%" });
                    $(this).css({ "height": "auto" });
                    $(this).css({ "height": $(this).parent().height() });
                    $(this)[0].__chartist__.update();
                    if (multichart == 2) {
                        $("svg", $(this)).css({ "height": "1px" });
                    }
                }
            } catch (e) { }
            try {
                if ($(this).attr("id").indexOf("Chart_Bar_") != -1) {
                    $("svg", $(this)).css({ "height": "100%" });
                    $(this).css({ "height": "auto" });
                    $(this).css({ "height": $(this).parent().height() - 13 });
                    $(this)[0].__chartist__.update();
                    $(this).css({ "height": $("svg", $(this)).css("height") });
                }
            } catch (e) { }
            try {
                if ($(this).attr("id").indexOf("Chart_Column_") != -1 || $(this).attr("id").indexOf("Chart_LineSmooth_") != -1 || $(this).attr("id").indexOf("Chart_LineStraight_") != -1) {
                    $("svg", $(this)).css({ "height": "100%" });
                    $(this).css({ "height": "auto" });
                    $(this).css({ "height": $(this).parent().height() - 13 });
                    $(this)[0].__chartist__.update();
                }
            } catch (e) { }
            try {
                if ($(this).attr("id").indexOf("Chart_dataGrid") != -1) {
                    targetHeight = 0;
                    $(this).css({ "height": "auto" });
/*
                    $(this).parents(".card").not(".full").each(function () {
                        if ($(this).outerHeight() > targetHeight) {
                            targetHeight = $(this).outerHeight();
                        }
                        $(this).css({ "height": targetHeight });
                        $("table.chart", $(this)).css({ "height": $(this).height() });
                    });
*/

Have you tried:
.card {
width: 100%;
padding: 9px 20px 9px 20px;
margin-bottom: 0px;
background: #ffffff;
box-shadow: 1px 1px 1px #dfdfdf;
box-sizing: border-box;
min-height: 400px;
}

The 400px can be played around with until it both divs fit. But then again if you have the same class on all the those divs it will effect all of them, why not a add a new class to the divs you want to change and target that with the min-height?

I dont know how to add new classes in javascript im kinda new to javascript

Can I have a link to the page in question please?

http://csamymaxmanagerbeta.pmaxonline.com

Login
username: <snip>
password: <snip>

Dont post your login details if they have power to change your site :slight_smile:

Do you have teamviewer or a remote program I really want to show you the links just work on our server I dont know why it is like that

Buddy what browser are you using, it looks like this on firefox and chrome, looks fine to me:

Im working on local thats why so I initially want to eliminate the whitespace that extra space withouth breaking the other pages I just want it to move up a little bit and for the height sizes to stay the same

I am not 100% on javascript but i think that is the route you would need to take for what you want to achieve, by adding a unque class name to the Black African Players and White Players boxes then adding css “min-height: 500px !important” for that class. Maybe someone with more experience in Javascript can help you with adding a new css class to thoses boxes.

If I’m understanding, the dilemma is:

When there is no space below the tables, the cards are of unequal height.
When the cards have the same height, there is space beneath the tables.

Trying to get two things that inherently have different heights to have the same height is something that I don’t think is possible to do. At least not 100%

I would not try to “stretch” the shorter table. I guess adjusting the amount of extra top / bottom padding that would need to be added to the shorter tables cells for each of its rows could be done. But it might detract from its readability, depending.

I think that JavaScript something like this could work OK.

  • get the height of the two tables
  • determine the tallest
  • set the card height for both to what is needed to accommodate the taller of the two

This is how you add class in jQuery!

$(".divName").addClass("class-name");

Happy Coding!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.