KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Uniform sizing for different cards on same Bootstrap Row #1588

Open The O opened this topic on on Aug 20, 2020 - 11 comments

The O commented on Aug 20, 2020

As explanatory from the subject, is there a way to make things appear uniform or is the only way to use only same card types in a row.

KoolReport commented on Aug 22, 2020

You can cover the chart do this:

<div class="sameHeight">
    DualChartCard::create(...);
</div>

and adding:

div.sameHieght card-header
{
    height:200px;
}

By this way you can fix the height of all cards.

The O commented on Aug 22, 2020

Tried this but it had no effect. Before contacting you, I had tried various height settings: %, pixels, rem - none of them worked.

The O commented on Aug 23, 2020

Is there something else I should be trying?

KoolReport commented on Aug 24, 2020

Let try again this:

div.sameHieght div.card-header
{
    height:200px;
}
The O commented on Aug 24, 2020

It makes no difference. I have attached a screenshot of a playground dashboard. It's made up of 2 rows each having column divs of "SameHeight" containing a chart. Also attached is a representative section of the code, in case you can spot any issue.

KoolReport commented on Aug 24, 2020

You have both class="col-md-4" and class="sameHeight", let try to make it class="col-md-4 sameHeight"

The O commented on Aug 24, 2020

Still no joy, doesn't work.

...and that last change should make no difference per HTML standards.

The O commented on Aug 25, 2020

Any hope of a solution for this?

The O commented on Aug 31, 2020

Bump...

The O commented on Sep 29, 2020

Hello KoolReport, is this possible or not?

KoolReport commented on Oct 1, 2020

Sorry for my late reply.

Let try this:

div.sameHeight div.card-header,
div.sameHeight div.card-body
{
    height:200px !important;
}

In general, you can use the Inspector tools of browser to view the element and its css class, and then you add to your code the suitable css class rules to tweak the height. Above css can be applied to make height of ChartCard and DualChartCard to be the same.

Let us know if you need further assistance.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

None