Currently, I am developing a web page utilizing IView components by Vue.js. However, I am facing an issue where the dropdown menu of the datepicker component is not functioning properly when nested inside a card component. It appears that the dropdown panel is hidden beneath the card. How can I resolve this and bring the dropdown menu to the front? Any guidance would be appreciated. Below is a section of the code snippet:
<card class="card">
<p slot="title">Offline Order Statistics</p>
<Col>
<Col span="3" class="offlineOrderSplitter">
<div class="offlineOrderSplitterDiv">
<p>Total Orders This Month</p>
</div>
<div class="offlineOrderSplitterDiv">
<p>Total Orders This Week</p>
</div>
</Col>
<Col span="20">
<div>
<span style="padding-left:10px">Order Statistics Last Week</span>
<div style="float:right">
<span>Today</span>
<span>This Week</span>
<span>This Month</span>
<span>
<DatePicker type="daterange" placement="bottom-end" placeholder="Select Date" style="width: 200px"></DatePicker>
</span>
</div>
</div>
</Col>
</Col>
</card>
Attached are screenshots illustrating the issue. The dropdown panel of the datepicker works fine when displayed at the bottom, but encounters a problem when shown at the top. https://i.sstatic.net/ZtNBA.png https://i.sstatic.net/kFUEk.png
Additional information: I have attempted setting the z-index to the highest value, but this solution did not resolve the issue.