Why is my content so wide

I am confusion to why my login is full width. Here is my blade view

<x-filament-panels::page.simple>

    {{-- @if ($errors->any())
    <div class="login-errors">

        <span class="login-errors-header">
            {{ __('There is a problem') }}
        </span>
        @foreach ($errors->all() as $error)

        <span class="login-error">
            {{ $error }}
        </span>

        @endforeach
    </div>
    @endif --}}

    {{-- <div class="login-form"> --}}
        <x-filament-panels::form id="form" wire:submit="authenticate" class="login-form-form">
            {{ $this->form }}

            <x-filament-panels::form.actions :actions="$this->getCachedFormActions()"
                :full-width="$this->hasFullWidthFormActions()" />
        </x-filament-panels::form>
        {{--
    </div> --}}


    {{-- <x-filament::section> --}}
        {{-- <div class="login-form-buttons"> --}}
            <x-filament::button color="info" icon="heroicon-m-key" color="recite_yellow" labeled-from="sm" size="sm"
                tag="button" x-data="authenticatePasskey" x-on:click="authenticate()"
                style="width: 100%; margin-bottom: 15px;">
                <span class="login-form-buttons-span">
                    {{ __('Sign in with Security Key') }}
                </span>
            </x-filament::button>

            {{--
        </div> --}}
        {{--
    </x-filament::section> --}}
</x-filament-panels::page.simple>

<x-filament-panels::page.simple>

    {{-- @if ($errors->any())
    <div class="login-errors">

        <span class="login-errors-header">
            {{ __('There is a problem') }}
        </span>
        @foreach ($errors->all() as $error)

        <span class="login-error">
            {{ $error }}
        </span>

        @endforeach
    </div>
    @endif --}}

    {{-- <div class="login-form"> --}}
        <x-filament-panels::form id="form" wire:submit="authenticate" class="login-form-form">
            {{ $this->form }}

            <x-filament-panels::form.actions :actions="$this->getCachedFormActions()"
                :full-width="$this->hasFullWidthFormActions()" />
        </x-filament-panels::form>
        {{--
    </div> --}}


    {{-- <x-filament::section> --}}
        {{-- <div class="login-form-buttons"> --}}
            <x-filament::button color="info" icon="heroicon-m-key" color="recite_yellow" labeled-from="sm" size="sm"
                tag="button" x-data="authenticatePasskey" x-on:click="authenticate()"
                style="width: 100%; margin-bottom: 15px;">
                <span class="login-form-buttons-span">
                    {{ __('Sign in with Security Key') }}
                </span>
            </x-filament::button>

            {{--
        </div> --}}
        {{--
    </x-filament::section> --}}
</x-filament-panels::page.simple>

Solution:

So just had a brief, I just temp renamed the simple.blade.php from resources/views/vendor, it fixes the view. So not sure what the issue entirely was as the simple.blade.php wasn't edited by me (that I can remember) ```php <x-filament-panels::layout.base :livewire="$livewire"> @props([...

Jump to solution

12 Replies

Jamie CeeOP•2mo ago

And the form in the Login class

    protected function getForms(): array
    {
        return [
            'form' => $this->form(
                $this->makeForm()
                    ->schema([
                        $this->getEmailFormComponent(),
                        $this->getPasswordFormComponent(),
                        $this->getRememberFormComponent(),
                    ])
                    ->statePath('data'),
            ),
        ];
    }

    protected function getEmailFormComponent(): Component
    {
        return TextInput::make('email')
            ->label(__('filament-panels::pages/auth/login.form.email.label'))
            ->email()
            ->required()
            ->autocomplete()
            ->autofocus()
            ->extraInputAttributes(['tabindex' => 1]);
    }

    protected function getPasswordFormComponent(): Component
    {
        return TextInput::make('password')
            ->label(__('filament-panels::pages/auth/login.form.password.label'))
            ->hint(filament()->hasPasswordReset()
                ? new HtmlString(Blade::render(
                    '<x-filament::link :href="filament()->getRequestPasswordResetUrl()">
                     {{ __(\'filament-panels::pages/auth/login.actions.request_password_reset.label\') }}
                     </x-filament::link>'
                )) : null)
            ->password()
            ->autocomplete('current-password')
            ->required()
            ->extraInputAttributes(['tabindex' => 2]);
    }

    protected function getRememberFormComponent(): Component
    {
        return Checkbox::make('remember')
            ->label(__('filament-panels::pages/auth/login.form.remember.label'));
    }

    protected function getForms(): array
    {
        return [
            'form' => $this->form(
                $this->makeForm()
                    ->schema([
                        $this->getEmailFormComponent(),
                        $this->getPasswordFormComponent(),
                        $this->getRememberFormComponent(),
                    ])
                    ->statePath('data'),
            ),
        ];
    }

    protected function getEmailFormComponent(): Component
    {
        return TextInput::make('email')
            ->label(__('filament-panels::pages/auth/login.form.email.label'))
            ->email()
            ->required()
            ->autocomplete()
            ->autofocus()
            ->extraInputAttributes(['tabindex' => 1]);
    }

    protected function getPasswordFormComponent(): Component
    {
        return TextInput::make('password')
            ->label(__('filament-panels::pages/auth/login.form.password.label'))
            ->hint(filament()->hasPasswordReset()
                ? new HtmlString(Blade::render(
                    '<x-filament::link :href="filament()->getRequestPasswordResetUrl()">
                     {{ __(\'filament-panels::pages/auth/login.actions.request_password_reset.label\') }}
                     </x-filament::link>'
                )) : null)
            ->password()
            ->autocomplete('current-password')
            ->required()
            ->extraInputAttributes(['tabindex' => 2]);
    }

    protected function getRememberFormComponent(): Component
    {
        return Checkbox::make('remember')
            ->label(__('filament-panels::pages/auth/login.form.remember.label'));
    }

I cant see any full width section in my form, only place is for the actions, which is inside the form itself, (the boolean value in the class) I've also removed any custom classes that were on the blade, that made no difference

toeknee•2mo ago

If you inspect the login page does the classes exist? fi-simple-main my-16 w-full bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 sm:rounded-xl sm:px-12 max-w-lg on the main tag? If so, you need to run npm run build and ensure your tailwind is configured to check the vendor dir for filament too.

Jamie CeeOP•2mo ago

Yeah this is my main

fi-simple-main my-16 w-full bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 sm:rounded-xl sm:px-12 sm:max-w-lg

fi-simple-main my-16 w-full bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 sm:rounded-xl sm:px-12 sm:max-w-lg

I've ran npm run build, How am I checking if tailwind is configured properly?

toeknee•2mo ago

can you check, do you have any views in: resources/views/vendor? Usually like: https://filamentphp.com/docs/3.x/notifications/installation#installing-tailwind-css

Installation - Notifications - Filament

Jamie CeeOP•2mo ago

Yeah I have the overridden login form in the vendor path, I've ran all those steps except the current creating a new app.blade.php layout - would this still be needed even though im just using the page.simple template?

toeknee•2mo ago

No it should be fine, and you are on the latest filamentphp version?

Jamie CeeOP•2mo ago

Yeah ran composer update this morning Im guessing its the w-100 class in the main tag, but if thats there by default Im sure I've had it not go full width before

toeknee•2mo ago

main should have a max-w-lg. I am a little un sure why yours is different, I can only assume an overriden layout. IF you remove your custom class does the default class work as expected If so compare and adjust accordingly.

Jamie CeeOP•5w ago

Apologies, got side tracked on another task yesterday, will give this a go later this afternoon and get back to you

Solution

Jamie Cee•5w ago

<x-filament-panels::layout.base :livewire="$livewire">
    @props([
    'after' => null,
    'heading' => null,
    'subheading' => null,
    ])

    <div class="fi-simple-layout flex min-h-screen flex-col items-center">
        @if (filament()->auth()->check())
        <div class="absolute end-0 top-0 flex h-16 items-center gap-x-4 pe-4 md:pe-6 lg:pe-8">
            @if (filament()->hasDatabaseNotifications())
            @livewire(Filament\Livewire\DatabaseNotifications::class, ['lazy' => true])
            @endif

            <x-filament-panels::user-menu />
        </div>
        @endif

        <div class="fi-simple-main-ctn flex w-full flex-grow items-center justify-center">
            <main
                @class([ 'fi-simple-main my-16 w-full bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 sm:rounded-xl sm:px-12'
                , match ($maxWidth ?? null) { 'xs'=> 'sm:max-w-xs',
                'sm' => 'sm:max-w-sm',
                'md' => 'sm:max-w-md',
                'lg' => 'sm:max-w-lg',
                'xl' => 'sm:max-w-xl',
                '2xl' => 'sm:max-w-2xl',
                '3xl' => 'sm:max-w-3xl',
                '4xl' => 'sm:max-w-4xl',
                '5xl' => 'sm:max-w-5xl',
                '6xl' => 'sm:max-w-6xl',
                '7xl' => 'sm:max-w-7xl',
                default => 'sm:max-w-lg',
                },
                ])
                >
                {{ $slot }}
            </main>
        </div>

        {{ \Filament\Support\Facades\FilamentView::renderHook('panels::footer') }}
    </div>
</x-filament-panels::layout.base>

<x-filament-panels::layout.base :livewire="$livewire">
    @props([
    'after' => null,
    'heading' => null,
    'subheading' => null,
    ])

    <div class="fi-simple-layout flex min-h-screen flex-col items-center">
        @if (filament()->auth()->check())
        <div class="absolute end-0 top-0 flex h-16 items-center gap-x-4 pe-4 md:pe-6 lg:pe-8">
            @if (filament()->hasDatabaseNotifications())
            @livewire(Filament\Livewire\DatabaseNotifications::class, ['lazy' => true])
            @endif

            <x-filament-panels::user-menu />
        </div>
        @endif

        <div class="fi-simple-main-ctn flex w-full flex-grow items-center justify-center">
            <main
                @class([ 'fi-simple-main my-16 w-full bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 sm:rounded-xl sm:px-12'
                , match ($maxWidth ?? null) { 'xs'=> 'sm:max-w-xs',
                'sm' => 'sm:max-w-sm',
                'md' => 'sm:max-w-md',
                'lg' => 'sm:max-w-lg',
                'xl' => 'sm:max-w-xl',
                '2xl' => 'sm:max-w-2xl',
                '3xl' => 'sm:max-w-3xl',
                '4xl' => 'sm:max-w-4xl',
                '5xl' => 'sm:max-w-5xl',
                '6xl' => 'sm:max-w-6xl',
                '7xl' => 'sm:max-w-7xl',
                default => 'sm:max-w-lg',
                },
                ])
                >
                {{ $slot }}
            </main>
        </div>

        {{ \Filament\Support\Facades\FilamentView::renderHook('panels::footer') }}
    </div>
</x-filament-panels::layout.base>

toeknee•5w ago

No but it might have been changed, it's why we don't tend to advise overriding views, diff compare the two views

Jamie CeeOP•5w ago

Only one I intentionally overridden was the login.blade.php as it was bveing a pain to pass the js functionality into the action for security keys

Gaming

Programming

Why is my content so wide

Did you find this page helpful?