Dynamic Custom Element Height

Ask the community
,
1

Is there a way to change the height of a custom element based on a dynamic variable?

I have a custom element that displays several checkboxes, however the number of checkboxes displayed is based on the result of a user input.

e.g. if the user inputs 2 only 2 checkboxes appear but if the user inputs 20, 20 checkboxes will appear.

At the moment if only 2 checkboxes are displayed I have a big area of white space under them, this is where the other checkboxes would be rendered if they were needed.

2

Does it happen on the live site or just in preview mode?

3

It’s on preview, I haven’t tried it on live yet

Edit
I have tried it on live now, the custom elements don’t even show up. I get the following error:

‘Error: could not find component SDK’

4

@bakieness

  1. Custom elements in preview mode are wrapped in an iframe. So it’s supposed to be different on live site.

  2. There’s not enough info here in order to locate the error on your live site.

5

@jonatandor35 Even with the custom element example Dropdown Custom Element I go onto live and cant see the dropdown but i don’t get the same error.

Don’t know if this helps but this is the errors i get when i load my custom elements on the live site.

1442×612 98.8 KB

6

@bakieness custom elements only work on sites that are connected to your own domain. I guess you haven’t connected the example template to your domain.

7

@jonatandor35 So i have to buy a custom domain, so i can’t have https://bakieness.wixsite.com/… for example.

8

@bakieness correct, Custom elements are only for premium accounts that are connected to your own domain.

9

@jonatandor35 Ok thanks for the help, So will the custom element height change dynamically on the live site once i buy a domain?

10

@bakieness It should be (unless you add some code to limit its height). I created a table of 100 rows using custom element and didn’t have any issue with the height.

11

@jonatandor35 Great thanks!

12

Hi,
I meet the same message error, have you found the solution since you came here last time ?

Regards,

13

@bakieness have you found the solution ?
I meet the same problem.
Thank you if you can advise me.

It happens for me on live site.

14

I amfacing the same issue as I resize I get variable width but height remains same,
How can I make height 100%;?
#comp-lzouyrg8_r_comp-lzoub8ua {
–custom-element-width: 100%;
–custom-element-height: auto;
display: var(–display);
–display: flex;
}