When we add images to Perspective flex containers we are getting multiple pixels of whitespace added to the bottom of images. We tried it with Image Management and drag and drop, however this padding always shows up in flex containers (coordinate containers don’t have this issue). Is this a known issue and/or is there a solution?
Note, we tested this in Ignition 8.1.11 and 8.1.12. it shows up in both versions.
Have you looked into adjusting how the image fits in the Image component? Could you share some pictures of what you’re encountering? Is the space literally “white”, or is it just additional spacing?
Here is what we get, you can see the image box is larger than the image itself. I have tried a dozen different manipulations to see if I can get rid of it.
It appears to be artificially adding a few pixels to the image box for any setting other than the flex “items” stretch option, which isn’t preferred for our other components.
Another example with a close-up on the image block, you can see the added pixels at the bottom of the image block (note this was taken from different view).
Could you supply the image file in question? If you can’t share it on the forum, could you send it to me as a Direct Message? I’m not seeing the behavior your photos show, and so I’m inclined to believe that white space is part of the image file.
I pulled a random jpg off the internet because we didn't want to use a customer's logo. No whitespace to be found.
(OK there is a tiny sliver, but not enough to warrant the amount of displacement shown)
Change your flex container items setting to any of the other options.
Ah, okay. That is an open issue where multiple components do not behave correctly when not using stretch. It’s a result of them not having any content which sets its own dimensions. Since an image has no defined dimensions it can’t figure out how to size itself.
Is there an official workaround? Can we put it in a container that does have defined dimensions in the mean time?
I would think that you would be able to put it in a flex container by itself, and then embed that container in the original container.
