Typeform/embed

Widget not sizing itself to parent element size

luisnaranjo733 opened this issue · 2 comments

luisnaranjo733 commented

I'm rendering a typeform in a flex container and I want the typeform widget to expand to fill that container which is the behavior I expected after reading this issue.

But that isn't happening. I've tried styling with style: {} and that's not working either

See screenshots below for example
The parent container (pink) when highlighted in chrome dev tools. You can see the form (black) is only taking up the minimum height).
image
The DOM for more details. The parent element is the

one that wraps the widget

image

What's the right way to get the widget to fill the height of the container?
Using the latest version of the package in a next.js project. Not passing in any props besides id, hidden, and onReady to the widget component

luisnaranjo733 commented

I ended up just using a popupbutton which would let me set size=100
Still feels strange that the default widget won't let you set width and height to 100%. it seems like it expects absolutes sizes only which is inconvenient if you're trying to fill the container.

The only way to get that is to measure the parent div sizes in client side after the initial render. Doing that causes jank because the form won't be there at first and it would appear later

Again, my issue is solved because it seemed more appropriate for me to just use popupbutton which does this easily.
Let me know if you'd like to me keep this issue open and I'll reopen it

mathio commented

The widget will automatically takes size of its parent element. Or you can specify CSS manually to size it as you wish. The parent element is the <div> that you use to define your widget.

You just add CSS like this for custom size:

<div
  data-tf-widget="HLjqXS5W"
  style="width:400px;height:600px"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Or for a full screen widget like this:

<div
  style="width:100%;height:100vh;"
  data-tf-widget="HLjqXS5W"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>

See CodeSandbox example here: https://codesandbox.io/s/xenodochial-framework-uh2roo?file=/index.html