cascader
cascader copied to clipboard
Published
20 hours ago •
react-component
react-component
grid layout with cascader
Parent element: <div className={relative gap-4 text-black grid grid-cols-${maxX} grid-rows-${maxY} w-full h-full overflow-y-auto overflow-x-auto}>
Component return:
return (
<Cascader
options={cascaderOptions}
id={id}
expandTrigger="hover"
className={z-10 ${className}}
dropdownClassName={z-50}
dropdownStyle={{ position: 'absolute', zIndex: 50 }}
onChange={(value, selectedOptions) =>
setInputValue(selectedOptions.map((o) => o.label).join(', '))
}
></Cascader>
);
The tailwind grid layout does not work properly with cascader, Parent option displayed together with sub options, and arrows displayed one line after option.
