KoolReport's Forum

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

Changing Table Properties (Font Size, Width) in Laravel / Blade #3120

Open chris rogers opened this topic on on Aug 14, 2023 - 2 comments

chris rogers commented on Aug 14, 2023

Hi there, I have been reading through the tutorials 1 to 10 to see how to change the rows/cell font size as well as the table width. I have attached a part of my blade file below. For width I have many columns to display and will export to excel. I also want to reduce the font size (I test with changing to 22 below).

While reading the tutorials I noticed the person who coded coded the reports has implemented slightly differently than what I see in the tutorials and am not sure if that is why I see no change or perhaps because I am using backpack for laravel.

When I look at inspect in my browser I see this for each table row

<tr ri=0= class="font-size: 22px;"> == $0
...
</tr>

I appreciate any assistance you can provide.

Thanks in advance

Chris

my report file

public function getInvoiceRevenueMonthly(Request $request)
{
    $centre_id = session()->get('centre_id');
    $centre = Centre::findOrFail($centre_id);
    $centreShortName = $centre->short_name;

    $year_options = [
        '2021',
        '2022',
        '2023',
        '2024',
    ];

    $month_options = [
        '11|01 Nov', '12|02 Dec', '01|03 Jan', '02|04 Feb', '03|05 Mar', '04|06 Apr',
        '05|07 May', '06|08 Jun', '07|09 Jul', '08|10 Aug', '09|11 Sep', '10|12 Oct'
    ];

    $selected_year = $request->input('year', ''); // Get the selected year from the request
    $selected_month_option = $request->input('month', ''); // Get the selected month option from the request

    $selected_month_parts = explode('|', $selected_month_option);
    $selected_month_number = $selected_month_parts[0];

    $data = DB::table('invoice_items AS it')
        ->selectRaw('
            ROW_NUMBER() OVER (ORDER BY invoices.invoice_number ASC) AS "S/N",
            invoices.invoice_number AS Invoice, 
            students.display_name AS Student,
            classers.short_name,
            invoices.invoice_date AS Date,
            invoices.revenue_start_date AS "Rev Date",
            if(classers.subject LIKE "%Math%",it.total_amount,"") AS Math, 
            if(classers.subject LIKE "%Science%",it.total_amount,"") AS Science, 
            if(classers.subject LIKE "%Robot%",it.total_amount,"") AS Robotics
        ')
        ->join('invoices', 'it.invoice_id', 'invoices.id')
        ->join('students', 'invoices.student_id', 'students.id')
        ->join('invoice_fee_types AS ift', 'it.invoice_fee_type_id', 'ift.id')
        ->join('classers', 'it.classer_id', 'classers.id')
        ->where('invoices.centre_id', '=', $centre_id)
        ->where('it.syear', $selected_year)
        ->where('invoices.status', '=', 'Approved')
        ->where('ift.type','=','term')
        ->whereMonth('invoices.invoice_date', '=', $selected_month_number)
        ->orderByRaw('invoices.invoice_number ASC')
        ->get();

    $data = $data->toArray();

    return view('reports.invoicerevenuemonthly', compact('data', 'year_options', 'month_options', 'selected_year', 'selected_month_option', 'centreShortName'));
}

my blade file

@extends('backpack::blank')

@section('content')
    <div class="container">
        <h2 class="text-center">Invoice Revenue Monthly Transactions: {{ $centreShortName }}</h2>

        <form method="GET" action="{{ route('report.invoicerevenuemonthly') }}">
            <select name="year" id="year">
                @foreach ($year_options as $year)
                    <option value="{{ $year }}" {{ $year == $selected_year ? 'selected' : '' }}>{{ $year }}</option>
                @endforeach
            </select>

            <select name="month" id="month">
                @foreach ($month_options as $month)
                    @php
                        list($month_number, $month_display) = explode('|', $month);
                    @endphp
                    <option value="{{ $month_number }}" {{ $month_number == $selected_month_option ? 'selected' : '' }}>{{ $month_display }}</option>
                @endforeach
            </select>
            <button type="submit">Filter</button>
        </form>

    @php
        use \koolreport\widgets\koolphp\Table;
    @endphp

    {!! Table::create([
        "dataSource" => $data,
        "showFooter" => ["bottom"],
        "cssClass" => [
            "table" => "table table-striped table-bordered ",
            "tr" => "font-size: 22px;",
        ],
        "cssStyle" => ["text-align:right",]
    ]) !!}

        

    </div>
@endsection
Sebastian Morales commented on Aug 14, 2023

I think font-size is CSS rule, not class. Thus, pls try to set tr's class and use an in-page style rule like this:

<style>
    .small-font {
        font-size: 22px !important; // set CSS rule for this class
    }
</style>
    {!! Table::create([
        "dataSource" => $data,
        "showFooter" => ["bottom"],
        "cssClass" => [
            "table" => "table table-striped table-bordered ",
            "tr" => "small-font", // set this tr's CSS class
        ], 
chris rogers commented on Aug 14, 2023

That worked - fantastic. Thanks so much

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
solved

Laravel