filepond

filepond copied to clipboard

If there is multiple images with different height in one row, panel height calculates incorrect because based on first child height. Also rows can overlap each other if add images with different height.

Example

appreciate the PR will review when I have some time

I think this PR might help with the problem I'm having. When I add some invalid file with some other valid files, the container loses height because it sets the new height according to the height of the invalid file and not everyone inside the container.

I used a work around by simply giving all items (containers) the same (minimal) height and a border in an additional CSS file:

li.filepond--item {
	min-height: 256px;
	border: dotted 2px #CCC;
	border-radius: 0.5em;
}

Additionally I gave the drop area a fixed height, in my case the whole page. You can simply put it in a div with a fixed height and you are good to go.

html {
	height: 100%;
	width: 100%;
}

*  {
	margin: 0;
} 

.filepond--root {
    height: calc(100vh - 20px);  /* Change  this to 100% and put the element in a container div with the desired height */
    border: 1px solid #CCC;
    padding: 10px;
    margin: 10px;
}

Maybe that works for you.