Skip to main content

popupContainer

Description​

Defines a custom HTML element as the container for all popups and non-inline dropdowns

By default, popups are appended to the document body, but this is not always suitable. For example, when a SVAR application occupies only part of a page or is rendered inside a <dialog> element. In such cases, popupContainer allows you to target a more appropriate element.

Usage​

<div use:popupContainer>
    <!-- your SVAR App -->
</div>

You can import the helper from @svar-ui/svelte-core.

Example​

The example below shows how to scope all popups to a wrapper <div> instead of the document body:

<script>
  import { popupContainer } from "@svar-ui/svelte-core";
  import { RichSelect } from "@svar-ui/svelte-core";

  const options = [
    { id: 1, label: "Option 1" },
    { id: 2, label: "Option 2" },
    { id: 3, label: "Option 3" },
  ];
</script>

<div use:popupContainer>
  <RichSelect {options} />
</div>

Any dropdowns or popups opened by SVAR components inside the use:popupContainer element will be rendered within that element rather than on the document body.

Related articles: