Filepond overflow

Hey, filepond is overflowing and hiding what's beneath Here's the code of the component:

SpatieMediaLibraryFileUpload::make('examples')
            ->label('Exemples')
            ->multiple()
            ->image()
            ->imageEditor()
            ->imageEditorAspectRatios([
                '16:9',
            ])
            ->panelLayout('grid')
            ->itemPanelAspectRatio(9 / 16)
            ->imageCropAspectRatio('16:9')
            ->panelAspectRatio('16:1')
            ->rules([
                Rule::dimensions()
                    ->maxWidth(1024)
                    ->maxHeight(1024)
                    ->ratio(16 / 9),
            ])
            ->maxSize(1024)
            ->maxFiles(6)
            ->collection('examples')
            ->reorderable()
            ->responsiveImages()
            ->columnSpanFull()
            ->required(),

SpatieMediaLibraryFileUpload::make('examples')
            ->label('Exemples')
            ->multiple()
            ->image()
            ->imageEditor()
            ->imageEditorAspectRatios([
                '16:9',
            ])
            ->panelLayout('grid')
            ->itemPanelAspectRatio(9 / 16)
            ->imageCropAspectRatio('16:9')
            ->panelAspectRatio('16:1')
            ->rules([
                Rule::dimensions()
                    ->maxWidth(1024)
                    ->maxHeight(1024)
                    ->ratio(16 / 9),
            ])
            ->maxSize(1024)
            ->maxFiles(6)
            ->collection('examples')
            ->reorderable()
            ->responsiveImages()
            ->columnSpanFull()
            ->required(),

Tailwind configuration is the one from the docs and the item containing the overflow is filepond--list-scroller Thx for any help!

34 Replies

awcodes•3w ago

Check your livewire version. There’s a bug in the latest version causing issue. If you update filament to latest it should lock it down unless you are managing livewire separately via composer.

skyrowl•3w ago

with the latest version of filament I'm locked to 3.5.6 while 3.5.9 is out I won't be able to update it rn ^^'

{
            "name": "filament/support",
            "version": "v3.2.115",
            // ...
            "require": {
                "livewire/livewire": "^3.4.10 <= 3.5.6",
                // ...
            },
            // ...
        },

{
            "name": "filament/support",
            "version": "v3.2.115",
            // ...
            "require": {
                "livewire/livewire": "^3.4.10 <= 3.5.6",
                // ...
            },
            // ...
        },

if you have anything else to suggest I'll take it

awcodes•3w ago

My only other suggestion is to inspect the dom and figure out what styling is causing the problem. This looks very odd to me though. That’s not a composer syntax I’ve ever seen before.

skyrowl•3w ago

Definitely the filepond--list-scroller and its children, they are using absolute position located right at the bottom of the drag and drop container This is my composer lock file, I wanted to be sure of the version so I pasted from here

awcodes•3w ago

Ok, what does the composer.json look like. It may not even be related to livewire, but Lw 3.5.8 broke the filament widgets in a similar way so it’s just a guess.

skyrowl•3w ago

tell me if you want the text version, here is the composer file with installed versions

awcodes•3w ago

Hmm that all looks ok. Can you try php artisan filament:upgrade and if you have a custom theme try npm run build also.

skyrowl•3w ago

nope did not work

skyrowl•3w ago

here is the culprit tho

awcodes•3w ago

Hmm. Possible something changed in filepond but I haven’t seen any other reports for this.

skyrowl•3w ago

here is the list container is .filepond--list.filepond--list voluntary ?

awcodes•3w ago

Well the styling is coming from filaments form css. Which is weird that it would just break and cause overflow issues unless something else has higher specificity or the dom structure is changing from something else.

skyrowl•3w ago

Yeah I agree tho my css file is empty so there's no chance it's from there ... app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

tailwind.config.js

export default {
    presets: [preset],
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./app/Filament/**/*.php",
        "./resources/views/filament/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./vendor/jaocero/radio-deck/resources/views/**/*.blade.php",
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter", ...defaultTheme.fontFamily.sans],
                title: ["DM Sans", ...defaultTheme.fontFamily.sans],
            },
            dropShadow: {
                'alternate-xl': '0 20px 13px rgb(93 115 102 / 0.5)'
            }
        },
    },

    plugins: [forms, typography],
};

export default {
    presets: [preset],
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./app/Filament/**/*.php",
        "./resources/views/filament/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./vendor/jaocero/radio-deck/resources/views/**/*.blade.php",
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter", ...defaultTheme.fontFamily.sans],
                title: ["DM Sans", ...defaultTheme.fontFamily.sans],
            },
            dropShadow: {
                'alternate-xl': '0 20px 13px rgb(93 115 102 / 0.5)'
            }
        },
    },

    plugins: [forms, typography],
};

postcss.config.js

export default {
    plugins: {
        "tailwindcss/nesting": "postcss-nesting",
        tailwindcss: {},
        autoprefixer: {},
    },
};

export default {
    plugins: {
        "tailwindcss/nesting": "postcss-nesting",
        tailwindcss: {},
        autoprefixer: {},
    },
};

vite.config.js

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

just in case it can help you figure out anything here are my config files also noticed something, maybe a known issue when I was uploading any file the filepond container grew to infinity until I set the ->panelAspectRatio('16:1')

awcodes•3w ago

What’s in your app.js

skyrowl•3w ago

nothing ... 🥲

awcodes•3w ago

Any console errors.?

skyrowl•3w ago

might add that I'm on mac so using webkit nope nothing

awcodes•3w ago

Do you have a repo you can share? I’m thinking there’s a js issue at this point. And the filepond js is having issues.

skyrowl•3w ago

I have almost nothing honestly the only thing you'd have to do to reproduce is use folio, volt functional and forms could it be an issue with either folio or volt ?

awcodes•3w ago

It could very well be. Could always try in on a standard livewire component without volt and see. I don’t think folio is the problem, but we have tried to make filament work with volt and that branch has never been merged to core so it’s possible.

skyrowl•3w ago

just tested, so, it doesn't come directly from volt, I tested with a component like so layout > view component > livewire component

skyrowl•3w ago

here's the full list of requests loaded on the livewire component (without volt)

awcodes•3w ago

Ok, at this point I’d need a repo to pull down and try to replicate.

skyrowl•3w ago

I found the problem ... ->panelAspectRatio('16:1') this line is messing tho I couldn't reproduce the growing container (the problem why I've put the ratio) I can't really share this exact repo but if I ever get the growing container I'll do the best reproduction I can

awcodes•3w ago

Ok, I’m willing to help. Just not sure if it’s a bug in filament or not without being able to reproduce it. A good point of reference is using the demo. If it breaks there then it is most likely an issue with filament and not the app itself.

skyrowl•3w ago

Yeah I understand, I'm sorry about that I can't even reproduce it myself ... I downgraded then updated to latest did filament:upgrade && npm run build Maybe I had an asset that was flawed ?

awcodes•3w ago

If it works in the demo, then it is most likely an issue in the app. It’s possible, could even be an issue with a plugin. Hard for us to say without a repro.

skyrowl•3w ago

Just to know for future reference and because I'll mainly use livewire with volt Is volt injecting scripts ?

awcodes•3w ago

Volt is not, but livewire is. They cover it in the upgrade guide on the livewire docs because alpine and livewire are one and the same in lW v3. They are entangled now. It has created some headaches for me. Trust me. 😆 But volt is a different beast on top of that, so there definitely could be some caveats.

skyrowl•3w ago

Seems to be way over what I can engineer 😵‍💫

awcodes•3w ago

You can figure it out. You’re not alone. Even I struggle sometimes. I do think that volt could be creating problems for you though. Just don’t have a solid answer for you, unfortunately.

skyrowl•3w ago

I probably could but I'd need way more knowledges, hope I'll have that level in the future 😁 Honestly it seems not to be that bad with volt, only thing I'm a bit scared of is octane caching Always a pain to check everything

awcodes•3w ago

No doubt. That’s a whole different level of app design. It’s great but certainly has its own level of understanding and design. Better question though, do you actually need octane? Worry about scaling when it’s needed. Don’t fall into the trap of over engineering.

skyrowl•3w ago

Not necessarily on this app honestly, tho I have a bigger app with multi db tenancy to rebuild with octane It's sort of a training before diving in hell 😅

Gaming

Programming

Filepond overflow