Skip to main content

autoFit

Description​

Optional. Enables automatic position calculation for inline dropdowns

autoFit controls automatic position calculation and alignment for inline dropdowns.

It applies only when inline is set to true.
For non-inline dropdowns (the default mode), automatic positioning and overflow handling are handled internally by the positioning logic. In this case, autoFit has no effect.

When enabled, autoFit automatically determines the optimal dropdown position relative to the input and prevents it from overflowing the browser viewport.

Usage​

autoFit?: boolean;

Parameters​

  • true - enables automatic position calculation and viewport overflow prevention for inline dropdowns
  • false - (default) disables automatic position adjustment for inline dropdowns

Example​

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

    let popup = true;
</script>

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

Related article: Positioning and aligning Dropdown