当 ALPINE JS 和 TAILWINDCSS 底部没有空间时，使下拉菜单下拉

【问题标题】：Make dropdown to drop up when theres no space at bottom ALPINE JS and TAILWINDCSS当 ALPINE JS 和 TAILWINDCSS 底部没有空间时，使下拉菜单下拉
【发布时间】：2020-09-07 07:11:57
【问题描述】：

我有一个使用顺风和 alpine js 制作的日期选择器组件，我使用 this 作为我的日期选择器的参考。我的问题是当我在小型设备上时的移动响应能力，日期选择器在底部的剩余空间中溢出。有没有什么办法可以像底部没有空间的时候向上的智能下拉菜单一样添加？

我也尝试在小型设备中放置媒体查询，但这不符合我的需求。

【问题讨论】：

很高兴知道您使用了什么作为参考，但您仍然需要理想地展示一些实际代码。否则我们会猜测一下。

标签： javascript responsive-design tailwind-css alpine.js

【解决方案1】：

解决此问题的唯一可靠方法是计算元素相对于视口的位置。为此，您将使用

const pos = element.getBoundingClientRect()

然后你可以计算到顶部/底部的剩余空间

const offsetTop = pos.top
const offsetBottom = window.innerHeight - pos.bottom

打开日期选择器时，您必须运行此代码并确定您的元素是否适合offsetBottom 中存储的像素值，否则您需要向上打开它或使用其他逻辑。

【讨论】：