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;
}

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

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

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

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

Answer 1

请看这个：

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

你可以简单地将body的宽度和高度设置为auto，那么就不需要使用position，也不需要删除任何东西。我认为您不需要使用height: 100%，因为它将由 TinyMCE 自动计算。我希望它有所帮助。

更新

查看 chrome 和 Firefox 中的屏幕截图。而且我没有删除任何 css，只是进行了更改。通过将 100% 放入 css 中，输出将如下所示：-

请用 auto 但不是 100% 检查这个..谢谢

Answer 2

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

的假设

解决方案

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

JSFiddle Example

我希望这会有所帮助。实际上，你真的只需要像 body { position: relative; } 那样将position: relative; 应用到身体上

Answer 3

它可以在 Firefox 和 Internet Explorer 上运行

只需删除此 css 代码

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

Answer 4

看来问题是由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 5

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

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

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

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

嗯，现在我想起来了，只要用户滚动，你就可以简单地关闭任何打开的颜色选择器 ...有点像逃避现实，但不可否认它具有最佳的投资回报率。 ;) 我们称之为Option 2！

选项 3：根据颜色选择器的实现，您可以覆盖 DOM 中的 where 渲染这些 div。我看到的最有前途的 API 方法是here。一旦将 div 放在相对定位的父级中，您还必须使颜色选择器的定位算法足够智能，以便在正确的位置查找 x 和 y 偏移 ...当我通过移动元素并在 chrome-console 中手动混入一些 css，该算法仍然根据 doc.body 计算 x 和 y 偏移量，因此根据您在单击时滚动的位置，一切都会错位

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

我希望这些信息足以帮助您解决问题...如果您有任何问题，请告诉我！