'Typform embedded as a widget: can't change size of the form

I embedded Typeform into my angular project, but can't find a way to change it's size.

home-page.component.ts

import {createPopup, createSlider, createWidget} from "@typeform/embed";


  openTypeform() {
    createWidget("my-typeform-id", { container: document.querySelector("#formId")!});
  }

home-page.component.html

<div class="home-page">
    <p><button (click)="openTypeform()">click to open popup</button></p>

    <div id="formId" style="width: 100%; height: 500px; border: 2px #ccc solid;"></div>

The div I am embedding also has size defined, but at the end it looks like this:

Solution 1:^[1]

You need to import the CSS too:

import { createPopup, createSlider, createWidget } from "@typeform/embed";
import "@typeform/embed/build/css/popup.css"
import "@typeform/embed/build/css/slider.css"
import "@typeform/embed/build/css/widget.css"

Only import CSS files for the embed types you are using in your app.

Alternatively you can also find the latest CSS at https://embed.typeform.com/next/css/<name>.css. However if you install the embed SDK locally I'd suggest you use the CSS file from your local installation.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Matej Lednicky

'Typform embedded as a widget: can't change size of the form

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]