Handle long validation message at mobile page width

[vvtkachenko]

Hi, it would be nice that filepond could show long validation message at mobile page width.

For example in the CodePen below, if uploaded file is above 1MB - validation message doesnt fit to pond widht and filename is pushed out of pond too. https://codepen.io/vova-tkachenko/pen/QZBobm

Probably such long messages should have 'max-width' set to width of pond fall down to the next line.

[rikschennink]

It shouldn't overlap/overflow like that, I'll see if I can fix that first and then introduce a different item layout option that has more room for text.

[pbowyer]

Support for this would be awesome. I have users uploading multiple files, so on desktop am using

    @media (min-width: 50em) {
        .filepond--item {
            width: calc(33.33% - .5em);
        }
    }

When an error is returned, it isn't constrained (silly length error message used for emphasis):

Note the 'Upload' and 'Retry' button to the right of the error message are hidden as I have my own upload button which I need users to click.

[Aside: I did this via CSS as setting styleButtonProcessItemPosition to null or false didn't remove them. Is that the best way?]

[rikschennink]

Yes, this is not good. I'll try to give this some more priority.

[pbowyer]

I had a play with the CSS but didn't solve it, sorry. My frontend skills are very rusty...

[pbowyer]

@rikschennink Sorry for chasing, but any chance you can look at this?

[utsha1510]

facing a similar issue where the whole area to drag and upload a file (grey container) appears throughout the width of the page. adding a CSS file didn't work. saw a similar issue in vue.js where it was corrected but I guess not in react. is somebody else facing any such issue?

[rikschennink]

@pbowyer no problem, I'm simply too busy.

This cuts of the text, so at least it doesn't exit the bounding box.

.filepond--file-status {
    overflow: hidden;
    max-width: 50%;
}

For a definitive fix the element should scale in height to make room for the error message, which introduces all kinds of other issues.

[nikolaidenis]

Hi @rikschennink Appreciate your work done regards this component! Quick question - is there any investigation/work on this issue?

Thanks!

[rikschennink]

@nikolaidenis I'm working on v5 in which I want to address all these kinds of core problems.

[mrkazmierczak]

How do you think, when will you finish working on version 5?

pon., 6 mar 2023 o 08:39 Rik @.***> napisał(a):

@nikolaidenis https://github.com/nikolaidenis I'm working on v5 in which I want to address all these kinds of core problems.

— Reply to this email directly, view it on GitHub https://github.com/pqina/filepond/issues/150#issuecomment-1455613120, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN4DNFFPLIKY3QF2WWNNCIDW2WICRANCNFSM4F6N7OPQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

-- Pozdrawiam Marcin Kaźmierczak

[rikschennink]

Honestly no idea. Hope before summer.

[juokavom]

The issue is still relevant, latest filepond version (as of 2023-11-05) is 4.30.4