tiny-vue 🐛 [Bug]: DatePicker时间面板被遮挡

3.16.0

3.4.34

Document

2. vue代码如下：

3. 页面渲染出来，面板就会被 class="body" 的hidden遮盖住了

datepicker

No response

Jul 29 '24 08:07 sunny-Fung

Bot detected the issue body's language is not English, translate it automatically.

Title: 🐛 [Bug]: DatePicker time panel is blocked

Jul 29 '24 08:07 Issues-translate-bot

https://opentiny.design/tiny-vue/zh-CN/infinity-theme/docs/faq 这个可解决这个问题

Aug 02 '24 01:08 sunny-Fung

看起来您遇到了一个问题，即 DatePicker 时间面板被遮挡。这个问题通常是由于 iframe 的样式设置导致的，特别是 overflow: hidden 属性可能会导致子元素被裁剪。

调整样式：
- 确保 iframe 的父元素没有设置 overflow: hidden，或者尝试将其改为 overflow: visible。
- 检查 DatePicker 的 z-index，确保它高于其他可能遮挡它的元素。
使用 portal 技术：
- 如果 DatePicker 支持 portal，可以尝试将其渲染到 body 外部，以避免被 iframe 的样式影响。
调整 iframe 的高度：
- 确保 iframe 的高度足够大，以容纳 DatePicker 的下拉面板。

如果这些建议没有解决您的问题，您可以提供更多的代码细节或尝试在不同的环境中进行测试，以帮助进一步诊断问题。

如果您需要进一步的帮助，请随时告诉我！

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

Mar 14 '25 09:03 petercat-assistant[bot]

MBM产品的联建4环境中，时间选择器在高度不充足的情况下，面板部分信息被截断。

这是没有问题的情景

Mar 14 '25 09:03 sunny-Fung

Bot detected the issue body's language is not English, translate it automatically.

In the MBM product joint construction 4 environment, when the time selector is insufficient, part of the panel information is truncated.

This is a scenario without any problems

Mar 14 '25 09:03 Issues-translate-bot

这是有问题的情景

时间选择面板下面的确认按钮被遮挡住了，麻烦修复一下

Mar 14 '25 10:03 sunny-Fung

Bot detected the issue body's language is not English, translate it automatically.

This is a problematic situation

The confirmation button under the time selection panel is blocked, please fix it

Mar 14 '25 10:03 Issues-translate-bot

Version 3.19.0

Vue Version 3.4.27

Mar 14 '25 10:03 sunny-Fung