KoolReport color styling missing in project

eLearning commented on Jul 26, 2021

When I directly load a Card from KoolReport examples folder I see the CSS color styling

However, when I load it in my project I see the color CSS is missing, can you please help me know what am I missing?

I have called the below already but still the color styling is missing

\koolreport\clients\Bootstrap;

Sebastian Morales commented on Jul 27, 2021

Do you happen to use KoolReport in any framework like Laravel, Symphony, etc?

eLearning commented on Jul 27, 2021

We are using it inside WordPress CMS as a plugin but that is not likely to be an issue.

Sebastian Morales commented on Jul 28, 2021

Would you pls post a screenshot of your project's directory structure and where KoolReport is installed? It's likely that the resources (css, js, etc) in KoolReport can not be accessed directly by client browsers since your CMS secures it. You would have to set a path to public directory for KoolReport resources to be automatically copied to. Rgds,

eLearning commented on Jul 28, 2021

The assets are loaded. The issue has been reproduced with a Core PHP example too.

Sebastian Morales commented on Jul 29, 2021

Would you pls open the dev tool's Network tab to see if all js and css files are loaded or not and what their urls are? Tks,

eLearning commented on Jul 29, 2021

Pushed the code to the below repo so you could reproduce it on your end too.

https://github.com/adeel-raza/KoolReportTest

Sebastian Morales commented on Jul 29, 2021

Oh, I see this. The Card widget's color is set by css class with Bootstrap 4. Pls use Bootstrap 4 for your project or add this Bootstrap4 trait in your report:

//MyReport.php
class MyReport extends \koolreport\KoolReport
{
    use \koolreport\bootstrap4\Theme;
    ...

Let us know how it works. Tks,

eLearning commented on Jul 29, 2021

There was one additional step composer require koolreport/bootstrap4 After this, it worked perfectly, thanks a lot!

KoolReport's Forum

KoolReport color styling missing in project #2231

Build Your Excellent Data Report