Skip to main content

inline

Description​

Optional. Defines the rendering mode of the dropdown

Usage​

inline?: boolean;

Parameters​

  • true - the dropdown is rendered inside the same HTML element as the input control; keeps dropdown together with related input during scroll, but can be overflown by other elements
  • false - (default) the dropdown is attached to the document body (or to a popupContainer element if specified), which ensures it displays correctly above main application; it is detached from the related input during scroll (use trackScroll to close it at this moment)

Example​

<script>
    import { Dropdown, Calendar } from "@svar-ui/svelte-core";

    let popup;
</script>

{#if popup}
    <Dropdown inline={true}>
        <Calendar value={new Date(2023, 2, 15)} />
    </Dropdown>
{/if}

Related article: Setting the rendering mode