最新版uni-datetime-picker在uni-app中贴边会超出可视区域

最新版uni-datetime-picker在uni-app中贴边会超出可视区域

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/H5

浏览器平台：Chrome
浏览器版本：115

示例代码：

最新版uni-datetime-picker贴边会超出可视区域


## 操作步骤：


最新版uni-datetime-picker贴边会超出可视区域

预期结果：

最新版uni-datetime-picker贴边会超出可视区域


## 实际结果：


最新版uni-datetime-picker贴边会超出可视区域

bug描述：

最新版uni-datetime-picker贴边会超出可视区域


更多关于最新版uni-datetime-picker在uni-app中贴边会超出可视区域的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于最新版uni-datetime-picker在uni-app中贴边会超出可视区域的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-datetime-picker组件布局问题。当组件靠近页面边缘时，弹出的日期选择面板可能会超出可视区域。

解决方案：

  1. 可以给组件添加margin或padding，使其不要紧贴边缘
  2. 使用CSS调整弹出层位置：
.uni-datetime-picker {
  position: relative;
}
.uni-datetime-picker__container {
  left: auto !important;
  right: 0;
}
  1. 或者通过props设置弹出方向：
<uni-datetime-picker placement="bottom-start"></uni-datetime-picker>
回到顶部