The snippet shows a FlowPanel containing two Links, each Link containing an Image.
The image display_mode is set to original_size and its height to 20.
The image is an svg file, its size is (according to Chrome’s dev tools) 113.38 x 133.38.
Why is the size of the div containing the image 248 x 115.38?
Hi Stefano,
For background: The height property is overridden if you specify original_size: Anvil will display the image at whatever the browser thinks the original size is (unless that would cause it to be wider than the space available for that component, in which case it shrinks until it fits within that width). This is why those images are taller than 20px.
If you want to size the image to the space available on the page, try one of the other display_mode options (you might be interested in shrink_to_fit, which will size the image to the smaller of the width or height of the component, or fill_width, which shrinks or grows the image until it fills the width of the component, and sets the height from that - again, overriding the height property).
I’m guessing the links are wider than the Images because that’s the width with which they are added to the FlowPanel (this can be found under “Container Properties” in the Properties dialog, or supplied as keyword arguments to add_component() if you’re constructing things programmatically). Each Image is then sizing (and horizontal_aligning) itself inside that Link.
Both an Image and a Link inside a FlowPanel have Width inside their container properties, but the Image's Width is used while the Link's Width is not (it is not even stored).
The same Image and Link inside a ColumnPanel don’t have a Width property. Their width is set by dragging the separator in the UI.
In my case I have Form1 with a FlowPanel and Form2 with a Link and an Image inside the link. I put the image inside the link because I want the user to click on the image, not just on the link’s text.
When Form1 is created this is executed:
for image in anvil.server.call('get_images'):
self.flow_panel_1.add_component(Form2(image))
So the hierarchy is: Form1 - FlowPanel - Form2 - Link - Image
Do I need to get rid of Form2 and add the images programmatically to the FlowPanel, so I can set their Width?
You can assign a width to each Form2 instance:
for image in anvil.server.call('get_images'):
self.flow_panel_1.add_component(Form2(image), width=400)
This will set the maximum width of both the image and the link.
If you do want the link to be larger than the image, you can constrain the image height using its height property.
NB: shrink_to_fit display mode will also stretch to fit if the source image is smaller than the size of the Image component.
Here’s an app where an image can be arbitrarily sized within a setup like yours, by setting the width of the form and the height of the Image component:
https://anvil.works/ide#clone:2CABU2JAIBWTVXGF=RPZXIIHJOLY2LTXC54SWX7DK
To add to that:
Whatever is the direct child of the FlowPanel gets the width Container Property (which is the point-and-click version of passing width= to flow_panel.add_component(), as @shaun describes above).
Your Links are inside Form2s, so it’s the Form2 instances that should have their width container property set. If you’re adding them in code, you pass width= to add_component(). If Form2 is a custom component and you’re dragging it onto the page in the designer, you can drag the width handle.