Skip to main content

dropdown

Description​

Optional. Defines the behavior and appearance of the Combo dropdown

Usage​

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

Parameters​

The object has the same parameters 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 control: "top", "right", "bottom", "left"
  • align - (optional) the alignment of the dropdown relative to the input control: "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, tracks the scroll behavior of a container with dropdown; the dropdown will close 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
  • virtualized - (optional) if true, allows dynamic rendering of list options to ensure fast performance on long lists of data; false by default

Example​

<Combo
  options={users}
  textField="label"
  dropdown={{ 
    position: "bottom",
    align: "start",
    trackScroll: true
   }}
/>

Related article: Configuring dropdown behavior

Related sample: Combo.Dropdown