How to add extraAttributes (class) to Section container?

My form schema looks like this:

public static function form( Form $form ): Form {
        return $form
            ->schema( [
                Forms\Components\Group::make()->schema( [
                    Forms\Components\Section::make()
                                            ->schema( static::getDetailsFormSchema() )
                                            ->columns( 2 ),

                    Forms\Components\Section::make()
                                            ->schema( [ static::getItemsRepeater() ] )
                                            ->columns( 1 ),

                    Forms\Components\Section::make()
                                            ->schema( static::getQuoteGrandTotalsSchema() )
                                            ->columns( 1 ),
                ] )
            ] )
            ->columns( null );
    }

public static function form( Form $form ): Form {
        return $form
            ->schema( [
                Forms\Components\Group::make()->schema( [
                    Forms\Components\Section::make()
                                            ->schema( static::getDetailsFormSchema() )
                                            ->columns( 2 ),

                    Forms\Components\Section::make()
                                            ->schema( [ static::getItemsRepeater() ] )
                                            ->columns( 1 ),

                    Forms\Components\Section::make()
                                            ->schema( static::getQuoteGrandTotalsSchema() )
                                            ->columns( 1 ),
                ] )
            ] )
            ->columns( null );
    }

The output on the frontend is below (excerpt from the section). Now I want to add an extra CSS class to the column that contains the last section. Is that possible, and if so - how?

[For every Section the same div appears like this. I want to add the css class on the last section container as it were]

<div style="--col-span-default: 1 / -1;" class="col-[--col-span-default]"> <-- WANT TO ADD EXTRA CLASS HERE
        <!--[if BLOCK]><![endif]-->
        <section x-data="{
        isCollapsed:  false ,
    }" class="fi-section rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
            <!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
            <div class="fi-section-content-ctn">
                <div class="fi-section-content p-6">
                    [my GrandTotalsComponent here]
                </div>
            </div>
        </section>
        <!--[if ENDBLOCK]><![endif]-->
    </div>

[For every Section the same div appears like this. I want to add the css class on the last section container as it were]

<div style="--col-span-default: 1 / -1;" class="col-[--col-span-default]"> <-- WANT TO ADD EXTRA CLASS HERE
        <!--[if BLOCK]><![endif]-->
        <section x-data="{
        isCollapsed:  false ,
    }" class="fi-section rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
            <!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
            <div class="fi-section-content-ctn">
                <div class="fi-section-content p-6">
                    [my GrandTotalsComponent here]
                </div>
            </div>
        </section>
        <!--[if ENDBLOCK]><![endif]-->
    </div>

2 Replies

Ramon.vV•6mo ago

I think you could use hook classes for this. https://filamentphp.com/docs/3.x/support/style-customization#overview

Style customization - Core Concepts - Filament

jelmerkeij•6mo ago

Thanks, that's an interesting approach. But I think this will not get me to the level of just the div <div style="--col-span-default: 1 / -1;" class="col-[--col-span-default]"> . It has no hook classes. I need a way to get to the parent (container?) of the section. I think...

Gaming

Programming

How to add extraAttributes (class) to Section container?