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 and 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: ```html <form wire:submit.prevent="submit" x-cloak x-on:form-processing-started="isUploadingFile = true"...

Jump to solution

2 Replies

Solution

bwubs•4mo ago

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>

bwubsOP•4mo ago

This makes sure the modal opens up without positioning constrains 🙂

Gaming

Programming

FilePond modal position