Dynamic Margins

Hi all,

I am struggling to find a solution to dynamically manage an elements margin number based on a number in a field.

For context. I have a certificate designer page and I want the user to be able to position a text element wherever they want within a group so I want to be able to manage the elements margins based on a number in an input field. In a perfect world, the margin number in the conditional settings would be a dynamic field but it doesn’t.

I cannot for the life of me think how this can be done.

Does anyone have any ideas please?

PS - I know I could set a condition for each number, ie ‘if this thing is X then margin is X’ so there could potentially be hundreds of conditions to achieve this so not ideal.

Thanks in advance
Craig

The following CSS is all you need (as an example using left margin)…

margin-left: 80px !important;

Just set an element ID on the element, then you can set the px value in the CSS dynamically based on the relevant Input’s value.

4 Likes

Good man Adam, that’s what I was looking for.

Appreciate you help. Thanks.

hey @adamhholmes
I think I have the same problem (see here for my implementation), but am not sure how to implement you code. here is what I do:

  1. set the ID attribute to “red”
  2. in an html I write the following: <div id="red" style="margin-left: 80px !important;"></div>
  3. I expect the margin to be 80 but this does not happen.

do you have any advice? thanks

You haven’t included any style tags in your HTML…

Also, the ID Attribute sets an Element ID, so you need to use the correct CSS syntax to refer to an element id (#) and set its properties…

So the code you need to add to your HTML element is:

<style>
#red {
    margin-left: 80px !important;
}
</style>
1 Like

as always many thanks :slight_smile:

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.