Dynamically change the width of a group

Need help
1

I’d like to change the width of a group dynamically. I know there are plugins that do this, but I’ve tried all of the ones I can find and none of them actually see to work.

I’ve see some posts that suggest using CSS/Javascript to accomplish this.

Are there any tips on how to do this? I have a value with a range of 1 - 100. I just want the width to be at the max for the group when it’s 100 and at the min for the group when it’s 1. Unfortunately, I can only input numbers in a condition and not a dynamic expression.

I’d appreciate any help on this. Thank you!

2

This is the way to go :slight_smile:

Activate the ‘Expose the option to add an ID attribute to HTML elements’ on Settings > General > Advanced Options
This will expose an ID attribute at the bottom of the Property Editor for every element.
Give an name to the element you want to resize
Use the HTML element, and use this snippet of code

<style>
    #elementID {
        width: DYNAMIC EXPRESSIONpx !important;
        height: DYNAMIC EXPRESSIONpx !important;
    }
</style>

Replace elementID with the name of the element in question.
Replace the dynamic expression with Range*Desired Max Width where Range goes from 0-1 and the max width is measured in pixels.

If the max width of the element is responsive to the page width, make sure that this is obeyed in the expression.
What i personally like to do is to put the resizable element inside a group which resizes dynamically with the page, but always rapresents the Max Width of the element. Then the expression just simply becomes Range*Parent Group’s width

1 Like
3

Thank you. I’ll give it a try.