我在 fullcalendar 上的弹出窗口被剪掉了答案

【问题标题】：My popups on fullcalendar are being clipped我在 fullcalendar 上的弹出窗口被剪掉了
【发布时间】：2013-02-11 01:57:40
【问题描述】：

我将 Bootstrap 2.2 弹出框与 FullCalendar 结合使用，但是当它们出现在边缘附近时，它们会被日历的 CSS 裁剪 - 请参见此处的小提琴： http://jsfiddle.net/nzxyY/6/

日历有几个包含内容的 div，但我怀疑这是罪魁祸首：

.fc-view {
   width: 100%;
   overflow: hidden;
 }

我可以使用 CSS hack 来使弹出框避免溢出：FullCalendar 对其内容施加的隐藏约束吗？将弹出框绑定到内部日历 DOM 元素（例如滚动）是有好处的，但它目前有被剪裁的缺点。我尝试将上述规则更改为溢出：可见，但这没有用。感谢您对此的任何想法。

【问题讨论】：

标签： css twitter-bootstrap fullcalendar

【解决方案1】：

还有其他问题可以通过相同的解决方案解决，但每次的上下文差异太大：

确定的解决方案是升级到最新的 2.3.0 版本，或者将this diff (github) 应用于您的 jQuery 工具提示插件（因为 popover 继承了工具提示行为）。

然后你可以让所有的 popover 行为相同（主要是因为你将 popover 初始化委托给另一个框架）：

$.fn.popover.defaults.container = 'body';

检查fixed fiddle。

或者您可以通过 popover 使用选项 popover ：

$('.popover').popover({
    container: 'body'
});

【讨论】：

好东西 :) 我看到了另外两个帖子，但都没有工作。但是，您的解决方案可以。非常感谢！
只是对已接受的答案的注意事项 - 一旦弹出框与主体绑定而不是直接绑定到日历事件，您必须响应确保弹出框生存、死亡和滚动的事件它打算表示的日历元素。我已经设法掩盖了所有需要处理但控制起来有点混乱的事件（我认为）。
@MarkH 当然..我没想到，但这是对应的，因为滚动是通过溢出管理的，这首先是问题所在。随意编辑我的答案以添加您的处理代码。
@MarkH 我遇到了同样的问题，这个答案修复了它（感谢@Sherbrow），但现在我也需要处理滚动。你能发布一些关于你是如何处理它的线索吗？
对我来说幸运的是，我的页面/日历不会滚动，所以这不是我必须处理的事件（我只需要处理日历上的日期更改以及当它作为下拉菜单消失时 -下）。我想要处理滚动，您需要附加某种事件处理程序并移动弹出窗口——就像那些烦人的、闪烁的侧边栏菜单有时会跟随页面滚动一样。

【解决方案2】：

您可以使用 clearfix，而不是使用 overflow: hidden。 Bootstrap already includes one（作为 LESS 混合）。

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

【讨论】：

非常感谢您的回复。溢出：隐藏在 FullCalendar 代码库中，所以如果我能找到解决它的方法，我特别想弄乱代码/样式。用户“Sherbrow”提供了一个带有此类修复的示例 jsFiddle，因此我将接受它作为答案。无论如何谢谢:)