Javascript TinyMCE颜色选择器下拉列表显示在屏幕外

到目前为止，这是Firefox和IE上的一个问题，我已经测试过了；Chrome上不存在这个问题

我在一个页面上包含两个TinyMCE编辑器，其中一个部分离屏。当我从第一个TinyMCE实例的工具栏上选择

颜色选择器

下拉选项时，下拉列表将显示在它应该显示的位置。但是，如果我向下滚动并在第二个实例中选择

颜色选择器

下拉列表，该下拉列表将显示在编辑器下方，通常在页面之外

您可以在此处看到这一点：

在不删除

html，body

CSS的情况下，如何使颜色选择器始终显示在正确的位置？

我将问题归结为在

html，body

元素上设置CSS

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

下拉div应用了由TinyMCE自动计算的CSS。它看起来像这样：

z-index: 65535; 
left: 641.467px; 
top: 633px; 
width: 162px; 
height: 105px;

它在FF中的显示方式（有时更糟）：

它在Chrome中的显示方式（外观）：

我对tinymce的colorpicker不太熟悉，但我可以看到问题所在，而且我可以可靠地复制它：当你打开一个picker，然后滚动时，问题就会出现。我也可以在chrome上复制

当我查看DOM时，我看到tinyMCE在document.body的末尾创建了两个绝对定位的div，每个picker对应一个div。当您打开一个工具栏按钮时，它们的位置会更新，以反映您单击工具栏按钮时工具栏按钮的位置，但当您滚动时，工具栏按钮永远不会更新

那么，如何解决这个问题呢？嗯，有几种可能性：

选项1：看起来tinyMCE提供了将控件绑定到事件（）的方法。有了它，您可以将回调绑定到“滚动”以重新定位框

嗯，现在我想起来了，只要用户滚动，你就可以关闭任何打开的颜色选择器。。。有点像是逃避责任，但不可否认它有最好的R.O.I.；）我们称之为选项2

选项3：根据colorpicker的实现，您可以覆盖这些div在DOM中的渲染位置。我看到的最有希望的API方法是。一旦在相对定位的父对象中有了div，您还必须使colorpicker的定位算法足够智能，以便在正确的位置查找x和y偏移量…当我尝试在chrome控制台中手动移动元素并混合一些css时，该算法仍然基于doc.body计算x和y偏移量，因此，根据您在单击时滚动的位置，所有内容都会偏离位置

也许他们已经找到了解决方案，但没有发布任何相关信息

---

我希望这是足够的信息让你克服这个问题。。。如果你有任何问题，请告诉我

问题似乎是由溢出引起的&x:hidden

这可能不是您想要的答案，但删除它或将其移动到页面包装器将解决您的问题

html, body {
    width: 100%;
    height: 100%;
    padding:0;
    margin:0;
}
#pagewrapper{
    overflow-x: hidden;
}

---

另一个选择是强制在卷轴上重新定位，但老实说，这太过分了。。。我强烈建议改为修复css

---

它可以在firefox和Internet Explorer上运行

只需删除这个css代码

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

---

你说过你不想从

html，body

中删除任何CSS，但你没有说要添加任何CSS！此解决方案基于这样一个假设，即您可以添加到

html，body

解决方案

---

我希望这有帮助。实际上，您只需要应用

position:relative

到body，像这样

body{position:relative；}

请看一下：

html,
body {
    width: auto;
    height: auto;
    overflow-x: hidden;
}

您可以简单地将车身宽度和高度设置为

auto

，这样就不需要使用position，也不需要删除任何内容。我认为您不需要使用高度：100%，因为它将由TinyMCE自动计算。我希望这有帮助

更新

看看chrome的屏幕截图和firefox中的截图。我没有删除任何css，只是做了更改..将100%添加到css中，输出将如下所示：-

---

请用auto（自动）检查这一个，但不是100%…谢谢你

无法在OS X上的Firefox 37.0.1中复制。@AlexanderO'Mara这正是我使用的设置。向下滚动到第二个TinyMCE实例并选择颜色选择下拉列表。奇怪的是，我刚刚能够复制它。不过，我似乎无法可靠地复制它，它大部分时间都在为我工作。@AlexanderO'Mara这种情况经常发生在我身上，但无论如何，这是一个必须解决的问题。有一个解决办法，我只是不确定它是什么：）问题是他们必须使用身高，但他们应该使用身高。我试图深入研究脚本，但找不到

windowManager

计算位置的方法。

如果不删除html，正文CSS

出现在我的问题中是有原因的-我知道删除它是定位的一个答案，但这不是我要找的。@John你为什么不能使用包装器呢？我可以用我的代码库很容易地添加包装器。问题是，我不知道最初的程序员使用

overflow-x:hidden

的意图-我猜他有一些元素溢出，他不知道如何修复，所以清除滚动条是一种黑客行为。看起来我最终会删除它并运行测试以确保它没有破坏任何东西。我真的不能直接给你这个答案的赏金；但我想我可以给你一个+1@John我添加了另一种方法，但我建议修复css。

溢出-x：隐藏感觉像是一个糟糕的解决方法。添加另一个坏的解决方案来适应坏的解决方案可能是个坏主意。是的，这对于ID来说太具体了——如果我添加另一个
html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative; /* Line added */
}

html,
body {
    width: auto;
    height: auto;
    overflow-x: hidden;
}