Making a page section dynamic based on html content

  • 21 June 2023
  • 0 replies
  • 47 views

Badge

We have an html element (widget) we insert on the page whose size is dynamic. Not just at initial page load but while the widget is being interacted with.

Because many of the elements on the page are position absolutely our widget keeps getting clipped by elements below it. Unbounce is calculating the top css value for the absolute positioning on page load. We need some way to hook into that calculation to account for our sizing.

We found some references in the community for changing the height to auto but that does seem to fix the clipping because you can't move something that is positioned absolutely.

There seems to be a few options here

1. Write a VERY brittle resize listener in our widget that adds to the top value for each element below it with a changed top css value.

2. Hook into some resize tooling that unbounce provides that we can call that will do the above in a less brittle way

3. Tell unbounce to not hard code top and height

4. Some unknown solution

Has anyone solved for this? If so how? 

Thanks in advance!


0 replies

Be the first to reply!

Reply