Allow container to automatically resize to fit the embedded survey

Design help General
#1

Hi guys!

I’ve been a long time lurker and first time poster.

Here’s the problem I’m facing: I’ve embedded a survey into a container but because the survey questions require a bit of space at times (think large drop down menus) a vertical scroll bar pops up at times.

I don’t like the look of the vertical scroll bar and instead want the container to resize in line with the survey. That way it’s a little bit less obvious that it’s an embedded survey and looks cleaner.

I’ve attached a screenshot that shows the vertical scroll bar that pops up.

Screen Shot 2021-09-01 at 5.41.45 PM
Screen Shot 2021-09-01 at 5.41.45 PM1122×451 16.4 KB

I’ve also attached two other screenshots of the HTML EMBED + the CONTAINER in which the HMTL EMBED is placed.

Screen Shot 2021-09-01 at 5.54.40 PM
Screen Shot 2021-09-01 at 5.54.40 PM250×637 15.9 KB

Screen Shot 2021-09-01 at 5.54.46 PM
Screen Shot 2021-09-01 at 5.54.46 PM234×650 18.5 KB

There might be a very easy fix but I’m just not well versed enough in Webflow to understand what I should be doing to overcome this issue.

I thank you in advance!

#2

Hey there and thank you for your first post!

You may want to try removing Overflow:none from the HTML embed, that may be causing the vertical scrollbar to show up. Because it’s a custom embed there may be CSS parameters in the custom code that are forcing the scrollbar to show up to ensure that the contents of the form can always be accessible and it’s not respecting your setting with Webflow.

You may also want to try removing the Min Height, Overflow, and Fit settings from the Container and adding in some bottom padding. This should force the container to auto size with the embed. Again, I am aiming a bit in the dark here given this is a custom embed but hopefully this solves your issue.

#3

Many thanks for your prompt response! Unfortunately it didn’t fix the issue but I’ll continue to tinker with it.

#4

Hi @DirkB, it might also help to share a link to the published page to see what kind of styles are being rendered by the form source.

The html embed is responsive if the content within the embed is also responsive, but if the css from the form embed is not responsive, then it will not be responsive on the published page either.

Html embed code is only rendered on the published page, there can also be other factors such as any special instructions for the embed itself from the form provider.