Jquery 使用overflow-x auto，下拉菜单在表内被截断

我有一系列的表格，在一些TD中有下拉菜单，所有的表格都将overflow-x设置为auto，因此如果表格内容比屏幕宽度宽，用户可以水平滚动

您可以在捕获中看到，显然溢出-x自动导致下拉列表被截断，即使其z索引大于表

包含css表的div：

.ms-webpart-zone.ms-fullWidth .ms-webpartzone-cell {
   display: block;
   overflow-x: auto;
   overflow-y: visible;
   min-height: 220px;
   position: relative;
   z-index: 10;
}

下拉式css：

top: 10px;
position: absolute;
visibility: visible;
left: 88px;
width: 226px;

---

我不能剪切和粘贴很多代码，因为这是一个SharePoint应用程序，所以我关于自定义css特别是html的操作字段是有限的

您可以尝试使用下拉列表：

position: absolute;
display: block;
top: depend on your parent element of dropdown
left: the same with top

---

尝试修改下拉CSS，如下所示：

top: 10px;
position: absolute;
visibility: visible;
left: 150px;
width: 226px;
bottom:50px;

---

位置：固定在下拉列表中是否有帮助

top: 10px;
position: fixed;
visibility: visible;
left: 88px;
width: 226px;

---

看起来你的主包装在桌子周围，是“结束”你的下拉列表。 看看你的两张截图会有意义的

下拉列表没有被切断，你桌子周围的灰色正方形——包含“工作流>Viabilidad…”——就在它前面，可能有更高的z指数或其他东西

---

检查一下这个灰色包装。可能会使其不透明以查看“后面”发生了什么。

默认情况下，父实体隐藏溢出内容。因此，只需为父级style=“overflow:visible”指定一个样式即可。在你的情况下，我猜父母是灰色盒子。检查页面，确保找到阻止下拉列表的正确父级

---

快乐编码

jQuery的另一个选项

$(document).on('click', '.dropdown-toggle', function (e) {
if ($(this).attr('aria-expanded') == 'true') {
    $('.table-responsive').css('overflow-x', 'visible')
} else {
    $('.table-responsive').css('overflow-x', 'auto')
}})

$(document).on('click', 'body', function (e) {
    $('.table-responsive').css('overflow-x', 'auto') })

---

谢谢@DüngKon，但它不起作用，下拉菜单仍然会在容器div上显示一个滚动条，而不是在div顶部显示overflow-x auto，而不会更改容器div的高度。父html元素的位置是什么？position:absolute仅在父项为position:absolute或position:relative时才起作用。问题不在于下拉列表的位置，而在于它们显示在表中，而不像absolute position元素（如第二幅图所示，下拉列表在div上生成垂直滚动，这不是我想要的行为）。您的主父级似乎有溢出：隐藏，这导致下拉列表出现问题。如果您提供一些html或CreateFiddle的演示代码，我们可以理解。@chill007主父级有两个属性overflow-x:auto；溢出y：可见。你可以在我在原始问题中粘贴的代码上看到这一点。这导致下拉菜单被切断，但我无法改变，因为这是预期的行为。如果布局中的表格宽度大于父div，则会创建一个滚动条，与高度相同。根据第二幅图像，我可以看到该下拉条不是默认的浏览器下拉条，而是自定义创建的。在这种情况下，当它出现在卷轴内时，下拉列表将始终位于表格卷轴内，即使您增加z索引。@Tom，我不知道“默认浏览器下拉列表”是什么意思，但正如我在原始帖子中所说，这是Sharepoint。答案的第二部分很有争议。您好，如果理解正确，您正在尝试实现一个悬停下拉列表，它将：1）保持可见/高于所有其他元素（div，table），2）当它不适合表的父div时不会造成溢出效应。此外，从您的评论来看，问题不在于下拉列表的位置，而在于它们显示在表中，而不是绝对位置元素（正如您在第二幅图像中看到的，下拉列表在div上生成了一个垂直滚动条），我不是专家，但它的绝对位置并不意味着它不会影响溢流条……谢谢你的回答@August。我试过了，效果很好，下拉列表不会被剪掉，但是当你向下滚动页面，下拉列表仍然可见时，下拉列表会跟随你，这是固定位置元素的正常行为，这是一个问题。我一直在试图找到一种方法，使下拉列表的位置相对于表的位置固定，但我想这是一个绝对位置的解决方案，我已经有了。是的，我一直在试图找出，确切地说，你在说什么。基于这一信息，我想说，让它保持绝对状态，并尝试更多地研究下拉菜单的祖先，特别是当下拉菜单关闭/打开时，如果它在宽度/高度上被修改，那么它上面有溢出，您可以通过监听chrome中开发工具的调试器/源中的更改来调试它。您可能有sharepoint附带的动态功能，可以做到这一点。嘿@August，我正试图找出是否有任何更改通过JQuery注入到下拉列表中，并且没有与高度或宽度相关的更改，但只要我删除de“overflow-x:auto”主祖先div的属性然后下拉菜单就像一个常规的“posibion-absolute”元素，问题消失了，所以我不知道还能做什么，我真的需要那些框在比页面容器大的时候滚动。嘿@Foaster，你说得对，我将桌子周围灰色容器的z-索引改为较低的，现在可以工作，但由于下拉列表的位置固定，IE11仍然存在问题，我使用了-ms device fixed，这显然是一个解决方案，但仍然有一个非常奇怪的下拉行为，其中部分下拉列表位于其他容器下。