Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect height of panel with multiple items in row #848

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

soarer1004
Copy link

@soarer1004 soarer1004 commented Jun 16, 2022

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

@rikschennink
Copy link
Collaborator

appreciate the PR will review when I have some time

@caioalexandre
Copy link

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.

@R-W-C
Copy link

R-W-C commented Mar 27, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants