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

Question

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:

Answer 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.