Skip to main content

position

Description​

Optional. Defines the position of a dropdown relative to the input

Usage​

position?: string;

Parameters​

  • "bottom" (default) – the dropdown appears below the input element

  • "top" – the dropdown appears above the input element

  • "left" – the dropdown appears to the left side of the input element

  • "right" – the dropdown appears to the right side of the input element

Example​

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

    let popup;

    function oncancel() {
        popup = false;
    }
</script>

<div class="datepicker" onclick={() => (popup = true)} >
    <Text />

    {#if popup }
        <Dropdown {oncancel} position={"top"} align={"center"}>
            <Calendar value={new Date(2023, 2, 15)} />
        </Dropdown>
    {/if}
</div>

<style>
    .datepicker {
        position: relative;
        width: 300px;
    }
</style>

Related article: Positioning and aligning Dropdown