How do apply css on modal submit Action

I want to remove modal submit action left and right padding.

<?php
 ->actions([
             Tables\Actions\Action::make('Subscribe')
                    ->button()
                    ->visible(function ($record) {
                        $subscription = Subscriptions::with(['user', 'plan'])
                            ->where('user_id', auth()->id())
                            ->where('is_active', 1)
                            ->first();
                        $activePlanId = $subscription->plan->id ?? null;

                        return ($record->id != $activePlanId) && ($record->name != 'Free');
                    })
                    ->label('Subscribe')
                    ->requiresConfirmation()
                    ->modalHeading('One last step')
                    ->modalWidth(MaxWidth::Small)
                    ->modalIcon('heroicon-o-check')
                    ->modalDescription('you\'r about to be taken off-site to finish payment.')
                    ->modalSubmitActionLabel('Proceed to Payment')
                    ->modalCancelAction(false)
                    ->action(function (Model $record, BillingDetails $billingDetails) {
                        $billingDetails->planSubmit($record);
                    }),
            ])
?>

<?php
 ->actions([
             Tables\Actions\Action::make('Subscribe')
                    ->button()
                    ->visible(function ($record) {
                        $subscription = Subscriptions::with(['user', 'plan'])
                            ->where('user_id', auth()->id())
                            ->where('is_active', 1)
                            ->first();
                        $activePlanId = $subscription->plan->id ?? null;

                        return ($record->id != $activePlanId) && ($record->name != 'Free');
                    })
                    ->label('Subscribe')
                    ->requiresConfirmation()
                    ->modalHeading('One last step')
                    ->modalWidth(MaxWidth::Small)
                    ->modalIcon('heroicon-o-check')
                    ->modalDescription('you\'r about to be taken off-site to finish payment.')
                    ->modalSubmitActionLabel('Proceed to Payment')
                    ->modalCancelAction(false)
                    ->action(function (Model $record, BillingDetails $billingDetails) {
                        $billingDetails->planSubmit($record);
                    }),
            ])
?>

3 Replies

SourabhOP•3mo ago

I have tried the below code, but it is not work .

<?php
 ->extraAttributes(['class' => 'px-3'])
?>

<?php
 ->extraAttributes(['class' => 'px-3'])
?>

toeknee•3mo ago

You can't really, you would have to go into negative margins and increased withs. Or override the view.

ChesterS•3mo ago

The only thing I can think of is you create a custom class like this

@layer components {
    .no-footer-padding {
        .fi-modal-footer {
            @apply p-0;
        }
    }
}

@layer components {
    .no-footer-padding {
        .fi-modal-footer {
            @apply p-0;
        }
    }
}

and then apply it to the modal

Action::make('doSomething')
    ->requiresConfirmation()
    ->extraModalWindowAttributes([
        'class' => 'no-footer-padding'
    ])

Action::make('doSomething')
    ->requiresConfirmation()
    ->extraModalWindowAttributes([
        'class' => 'no-footer-padding'
    ])

(the above are just examples and can probably be improved... Obviously, if you want to do it for all your modals, just do

.fi-modal-footer {
    @apply p-0;
}

.fi-modal-footer {
    @apply p-0;
}

Gaming

Programming

How do apply css on modal submit Action