FilePond modal position

I've a single form that only holds an avatar file upload, like this:

    public function avatarForm(Form $form): Form
    {
        return $form->model($this->employee)->schema([
            FileUpload::make('profile_image')
                ->label(__('Profile Image'))
                ->hiddenLabel()
                ->getUploadedFileNameForStorageUsing(fn(TemporaryUploadedFile $file): string => TemporaryUploadedFile::generateHashNameWithOriginalNameEmbedded($file))
                ->directory(User::$profileImagePath)
                ->avatar()
                ->image()
                ->imageEditor(),
        ])->statePath('avatarFormData');
    }

    public function avatarForm(Form $form): Form
    {
        return $form->model($this->employee)->schema([
            FileUpload::make('profile_image')
                ->label(__('Profile Image'))
                ->hiddenLabel()
                ->getUploadedFileNameForStorageUsing(fn(TemporaryUploadedFile $file): string => TemporaryUploadedFile::generateHashNameWithOriginalNameEmbedded($file))
                ->directory(User::$profileImagePath)
                ->avatar()
                ->image()
                ->imageEditor(),
        ])->statePath('avatarFormData');
    }

And I use it in my blade:

<div x-data="{ isUploadingFile: false }">
    <form wire:submit.prevent="submit" x-cloak
          x-on:form-processing-started="isUploadingFile = true"
          x-on:form-processing-finished="isUploadingFile = false">

        <div class="w-full bg-cover rounded-md mb-16 bg-center relative @if($userDto->header_image) h-64 @endif"
             @if($userDto->header_image) style="background-image: url('{{ $userDto->header_image }}')" @endif>
            <div class="absolute bottom-[-30px] left-1/2 transform -translate-x-1/2">
                {{ $this->avatarForm }}
            </div>
        </div>
    </form>

<div x-data="{ isUploadingFile: false }">
    <form wire:submit.prevent="submit" x-cloak
          x-on:form-processing-started="isUploadingFile = true"
          x-on:form-processing-finished="isUploadingFile = false">

        <div class="w-full bg-cover rounded-md mb-16 bg-center relative @if($userDto->header_image) h-64 @endif"
             @if($userDto->header_image) style="background-image: url('{{ $userDto->header_image }}')" @endif>
            <div class="absolute bottom-[-30px] left-1/2 transform -translate-x-1/2">
                {{ $this->avatarForm }}
            </div>
        </div>
    </form>

The avatar form is positioned the way I want it (see first screenshot). But the modal when editing the profile image is positioned completley wrong. It looks like its also affected by the

relative

relative

and

absolute

absolute

classes of the containers (see second screenshot).

Is there a way to keep the design as is, but render the filepond modal somewhere else? Or can I fix this with another positioning trick?

Solution

Huraay! I've fixed it myself by putting the form outside of the header image:

    <form wire:submit.prevent="submit" x-cloak
          x-on:form-processing-started="isUploadingFile = true"
          x-on:form-processing-finished="isUploadingFile = false">

        <div class="w-full bg-cover rounded-md  bg-center @if($userDto->header_image) h-64 @endif"
             @if($userDto->header_image) style="background-image: url('{{ $userDto->header_image }}')" @endif>
        </div>
        <div class="flex items-center justify-center -mt-24 pb-20">
            {{ $this->avatarForm }}
        </div>
    </form>

    <form wire:submit.prevent="submit" x-cloak
          x-on:form-processing-started="isUploadingFile = true"
          x-on:form-processing-finished="isUploadingFile = false">

        <div class="w-full bg-cover rounded-md  bg-center @if($userDto->header_image) h-64 @endif"
             @if($userDto->header_image) style="background-image: url('{{ $userDto->header_image }}')" @endif>
        </div>
        <div class="flex items-center justify-center -mt-24 pb-20">
            {{ $this->avatarForm }}
        </div>
    </form>

Jump to solution

FilePond modal position

I've a single form that only holds an avatar file upload, like this:

    public function avatarForm(Form $form): Form
    {
        return $form->model($this->employee)->schema([
            FileUpload::make('profile_image')
                ->label(__('Profile Image'))
                ->hiddenLabel()
                ->getUploadedFileNameForStorageUsing(fn(TemporaryUploadedFile $file): string => TemporaryUploadedFile::generateHashNameWithOriginalNameEmbedded($file))
                ->directory(User::$profileImagePath)
                ->avatar()
                ->image()
                ->imageEditor(),
        ])->statePath('avatarFormData');
    }

    public function avatarForm(Form $form): Form
    {
        return $form->model($this->employee)->schema([
            FileUpload::make('profile_image')
                ->label(__('Profile Image'))
                ->hiddenLabel()
                ->getUploadedFileNameForStorageUsing(fn(TemporaryUploadedFile $file): string => TemporaryUploadedFile::generateHashNameWithOriginalNameEmbedded($file))
                ->directory(User::$profileImagePath)
                ->avatar()
                ->image()
                ->imageEditor(),
        ])->statePath('avatarFormData');
    }

And I use it in my blade:

<div x-data="{ isUploadingFile: false }">
    <form wire:submit.prevent="submit" x-cloak
          x-on:form-processing-started="isUploadingFile = true"
          x-on:form-processing-finished="isUploadingFile = false">

        <div class="w-full bg-cover rounded-md mb-16 bg-center relative @if($userDto->header_image) h-64 @endif"
             @if($userDto->header_image) style="background-image: url('{{ $userDto->header_image }}')" @endif>
            <div class="absolute bottom-[-30px] left-1/2 transform -translate-x-1/2">
                {{ $this->avatarForm }}
            </div>
        </div>
    </form>

<div x-data="{ isUploadingFile: false }">
    <form wire:submit.prevent="submit" x-cloak
          x-on:form-processing-started="isUploadingFile = true"
          x-on:form-processing-finished="isUploadingFile = false">

        <div class="w-full bg-cover rounded-md mb-16 bg-center relative @if($userDto->header_image) h-64 @endif"
             @if($userDto->header_image) style="background-image: url('{{ $userDto->header_image }}')" @endif>
            <div class="absolute bottom-[-30px] left-1/2 transform -translate-x-1/2">
                {{ $this->avatarForm }}
            </div>
        </div>
    </form>

The avatar form is positioned the way I want it (see first screenshot). But the modal when editing the profile image is positioned completley wrong. It looks like its also affected by the

relative

relative

and

absolute

absolute

classes of the containers (see second screenshot).

Is there a way to keep the design as is, but render the filepond modal somewhere else? Or can I fix this with another positioning trick?

Solution

Huraay! I've fixed it myself by putting the form outside of the header image:

    <form wire:submit.prevent="submit" x-cloak
          x-on:form-processing-started="isUploadingFile = true"
          x-on:form-processing-finished="isUploadingFile = false">

        <div class="w-full bg-cover rounded-md  bg-center @if($userDto->header_image) h-64 @endif"
             @if($userDto->header_image) style="background-image: url('{{ $userDto->header_image }}')" @endif>
        </div>
        <div class="flex items-center justify-center -mt-24 pb-20">
            {{ $this->avatarForm }}
        </div>
    </form>

    <form wire:submit.prevent="submit" x-cloak
          x-on:form-processing-started="isUploadingFile = true"
          x-on:form-processing-finished="isUploadingFile = false">

        <div class="w-full bg-cover rounded-md  bg-center @if($userDto->header_image) h-64 @endif"
             @if($userDto->header_image) style="background-image: url('{{ $userDto->header_image }}')" @endif>
        </div>
        <div class="flex items-center justify-center -mt-24 pb-20">
            {{ $this->avatarForm }}
        </div>
    </form>

Jump to solution

FilePond modal position

FilePond modal position

Similar Threads

Similar Threads

Similar Threads