Custom Component resize, set heightType to auto?

App Building
, ,
1

I am building a custom component that displays a picture from a URL or byte string. Then the user can click on the picture and a red dot will appear and the coordinate will be reported. Then these coordinates are used for other purposes later.

Everything seems to be working just fine, however, I have an issue with the size of the component when changing the size of the browser window. When using the exiting Image component it has heightType: "auto" but custom component has heightType: "fixed" and therefore the custom component is incorrectly being resized - I want it to be resized exactly as the existing Image component.

Can someone help me to achieve this?

Here's the Model:

{
"imageUrl": {{image_url_text.value}},
"clickCoordinates": [],
"imageWidth": 0,
"imageHeight": 0
}

Here's the IFrame Code:

body { display: flex; justify-content: center; align-items: center; height: 100%; margin: 0; } #image-container { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: auto; } .img-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } img { width: 100%; height: 100%; object-fit: contain; }

2

Hi @Nauris_Dorbe! Welcome to the community!

We have a feature in beta for making the height of a custom component dynamic based on its content. Does that sound like what you're looking for? It's not available by default, but I added it to your account if you want to try it out.

Let me know if it helps! :crossed_fingers:

2 Likes
3

Awesome, thank you very much. This indeed seems to solve the problem I was facing! :slight_smile:

4

Hello, I would like this feature too please too for my account! I have a custom component that renders multiple rows of data, and I need a dynamic height so the user doesn't have to scroll.

5

Hi @Ash_Khan I added this to your account. Let me know if you have any questions or concerns !

6

Thanks a lot for the quick reply! Working great now, thanks.

7

Is this feature still in beta? If so could I have it added as well?

8

Yes, it's still in beta. I've added it to your Cloud account :blush:

9

Is this feature sill in beta? it would be extremely usful.

10

Hi @DavidSmith,

It is, but our team is just starting a larger custom component project, so I hope this can be moved forward :blush: I've added it to your Cloud account for now.

11

Me too! So useful to have this! Now my students have to scroll.

12

add me . thanks

13

Hi @Mark_Png I added this for you!

@AnsonHwang I wanted to double check what org to add this to? Is it the organization linked to the email you have here on our forum? We add features based on the subdomain for Cloud or license key for on-prem (feel free to dm if you don't want to post it here)

14

Hi @Tess,

I'm very interested for this feature too, could you add it to my account?

Thanks a lot for your help.

Best regards,
Aurélien

15

Hi @gustus added! :blush:

16

Hi @Tess,

Could you please add this to my account

thx
John

17

Added, @johnzh!

18

Hi @Tess
Can you add this function to my account too?

19

@Tess Can I get this feature enabled too, please?

20

Added for you both!

1 Like