TinyMCE 颜色选择器下拉菜单出现在屏幕外

Question

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

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

您可以在此处查看实际效果：http://jsfiddle.net/nm6wtca3/

在不删除 html, body CSS 的情况下，如何才能使颜色选择器始终出现在正确的位置？

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

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

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

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

它在 FF 中的表现（有时更糟）：

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

Answer 1

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

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

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

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

嗯，现在我想起来了，你可以在用户滚动时简单地关闭所有打开的颜色选择器 ...有点像逃避，但不可否认有最好的R.O.I。 ;) 我们称之为 选项 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... 也许他们找到了解决方案，但还没有发布任何相关信息？

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

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

在 Firefox 和 Internet Explorer 上运行良好

只需删除此 css 代码

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

Answer 4

您确实说过不想从 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; 应用于 body

Answer 5

请看这个：

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

只需将body的宽高设置为auto，就不需要position了，也不需要去掉任何东西。我认为您不需要使用 height: 100% 因为它将由 TinyMCE 自动计算。希望对您有所帮助。

更新

查看来自 chrome 的屏幕截图以及 firefox 中的屏幕截图。而且我没有删除任何 css 但只是改变了..并且通过将 100% 放入 css 输出将像 :-

请用自动但不是 100% 检查这个。谢谢

TinyMCE 颜色选择器下拉菜单出现在屏幕外

TinyMCE color picker dropdown appears off-screen

javascript

css

firefox

tinymce

tinymce-4

解决方案