TinyMCE颜色选择器下拉列表出现在屏幕外

Question

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

我在一个页面上包含两个TinyMCE编辑器，其中一个部分在屏幕外启动。当我从第一个TinyMCE实例的工具栏中选择color picker下拉选项时，下拉列表会显示在应该的位置。但是，如果我向下滚动并选择第二个实例中的color picker下拉列表，则该下拉列表将显示在编辑器下方，通常在页面外。

您可以在此处查看此操作：http://jsfiddle.net/nm6wtca3/

如果不删除html, body CSS，我该怎么办才能让颜色选择器始终显示在正确的位置？

我已经将问题追溯到在html, body元素上设置CSS。

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

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

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

它如何出现在FF中（有时更糟）：

它在Chrome中的显示方式（它应该如何显示）：

Answer 1

我不是超级熟悉tinymce的颜色选择器，但我可以看到问题，我可以可靠地复制它：当你打开一个选择器，然后滚动时，就会出现问题。我也可以用chrome复制这个。 Here's a video.

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

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

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

嗯，现在我想起来了，只要用户滚动你就可以关闭任何打开的采样器... ...有点感觉就像一个警察，但不可否认它有最好的R.O.I. ;）我们称之为选项2 ！

选项3 ：根据颜色选择器的实现，您可以覆盖DOM中的 where ，这些div被渲染。我认为看起来最有希望的API方法是here。一旦你将div放在一个相对定位的父级中，你还必须让colorpicker的定位算法足够智能，以便在正确的位置查找x和y offset ...当我通过移动在chrome-console中手动对某些css进行mashing和混搭，该算法仍然基于doc.body计算x和y偏移量，因此根据点击时滚动的位置，一切都将不在位置 < / p>

It looks like this issue might be troubling other people as well...也许他们找到了解决方案，但还没有发布任何相关信息？

我希望这足以让您解决问题...如果您有任何疑问，请与我们联系！

Answer 2

问题似乎是由overflow-x: hidden;

引起的

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

<强> Working Example

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

---

另一个选择是强制重新定位滚动，但老实说这是矫枉过正......我强烈建议修改css。

Another working example

$('body').scroll(posfix); // when the body scrolls 
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button

function posfix() {
    setTimeout(function () { // hack way to ensure it fires after the menu is shown
        $('#mceu_51').css({
            top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button's position
            left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
        });
        $('#mceu_52').css({
            top: $('#mceu_35').offset().top + $('#mceu_35').height(),
            left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
        });
    }, 1);
}

Answer 3

你确实说过你不想从html,body删除任何CSS，但你没有说要添加它！此解决方案基于您可以添加到html,body

的假设

解决方案

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative; /* Line added */
}

JSFiddle Example

我希望这会有所帮助。实际上，您实际上只需将position: relative;应用于正文body { position: relative; }

Answer 4

它适用于Firefox，并且Internet Explorer很好

只需删除此css代码

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

Answer 5

请看一下：

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

您可以简单地将身体宽度和身高设置为auto，然后就不需要使用位置，也不必删除任何内容。我认为您不需要使用height: 100%，因为它将由TinyMCE自动计算。我希望它有所帮助。

<强>更新

查看chrome中的屏幕截图和firefox中的相同内容。我没有删除任何CSS但只是改变..并通过将100％放在CSS中输出将如下： -

请用自动检查这个但不是100％..谢谢