Я использую Elements UI и попутный ветер css в моем приложении React. У меня есть компонент, который представляет раздел карты, и у меня есть несколько сложенных вертикально. У каждого из этих элементов карты есть выпадающее меню, которое, однако, не полностью отображается, так как кажется, что оно ограничено шириной окружающего компонента (см. Скриншот ниже). Я попытался добавить z-index в выпадающий список и элементы, но это не сработало. Кто-нибудь знает, как сделать так, чтобы он накладывался на другие компоненты карты?
Это выпадающий компонент (= PaymentDropdown во втором листинге)
<Dropdown
className="flex items-center"
trigger={'click'}
onCommand={onCommand}
menu={
<Dropdown.Menu className="z-20">
<Dropdown.Item command="mark_as_paid" className="flex items-center min-w-180 w-180 py-8 px-16">
<div className="flex items-center justify-center rounded-full w-16 h-16">
<CheckedIcon />
</div>
<div className="flex items-center ml-12">
<p className="leading-none">
<span className="text-text">Mark as paid</span>
</p>
</div>
</Dropdown.Item>
</Dropdown.Menu>
}
>
<Button onClick={e => e.stopPropagation()} loading={loading} className="w-160">
Payment Options <i className="el-icon-caret-bottom el-icon--right"></i>}
</Button>
</Dropdown>
, и это окружающий компонент карты:
<div onClick={onClick}>
<Card className="cursor-pointer hover:bg-gray-100">
<div className="flex items-start sm:items-center">
...
<div className="hidden md:block px-34">
<div className="btn-wrapper">
<PaymentDropdown/>
</div>
</div>
...
</div>
</Card>
</div>
