Skip to main content

dropdown

Description​

Optional. Defines the behavior and appearance of the date range picker dropdown

Usage​

dropdown?: {
    inline?: boolean;
    position?: "top" | "right" | "bottom" | "left";
    align?: "start" | "center" | "end";
    css?: string;
    width?: string | "unset" | "auto";
    trackScroll?: boolean;
};

Parameters​

The object has the same properties as the Dropdown control:

  • inline - (optional) defines the rendering mode of the dropdown:
    • 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)
  • position - (optional) the position of the dropdown relative to the input: "top", "right", "bottom", "left"
  • align - (optional) the alignment of the dropdown relative to the input: "start", "center", "end"
  • css - (optional) adds a custom CSS class to the dropdown
  • width - (optional) sets the width of the dropdown; possible values are a CSS string (e.g. "300px"), "unset", or "auto"
  • trackScroll - (optional) applies only when inline is false; if true, the dropdown closes when the container (document body or popupContainer) is scrolled, preventing the dropdown from staying open after the input has scrolled out of view; false by default

Example​

<DateRangePicker
    dropdown={{
        position: "bottom",
        align: "start",
        trackScroll: true
    }}
/>

Related article: Configuring the dropdown

Related sample: DateRangePicker