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​

import { Dropdown, Calendar } from "@svar-ui/react-core";

function MyDropdown({ popup }) {
  return (
    <>
      {popup && (
        <Dropdown inline={true}>
          <Calendar value={new Date(2023, 2, 15)} />
        </Dropdown>
      )}
    </>
  );
}

export default MyDropdown;

Related article: Setting the rendering mode