我在fullcalendar上的弹出窗口正在被剪辑 [英] My popups on fullcalendar are being clipped

问题描述

我使用Bootstrap 2.2与FullCalendar结合使用，但当它们出现在边缘附近时，它们会被日历的CSS剪辑 - 请参阅这里的小提琴：
http://jsfiddle.net/nzxyY/6/

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

  .fc-view {
 width：100％; 
 overflow：hidden; 
} 
  

是否存在可用于使popover避免溢出的CSS hack： FullCalendar对其内容施加的隐藏约束？将弹出窗口绑定到内部日历DOM元素（例如滚动）上有好处，但它目前具有被剪辑的缺点。我试着改变上面的规则溢出：可见，但没有奏效。
欣赏对此的任何想法。

解决方案

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

• 使引导程序弹出窗口重叠


• 引导程序弹出窗口限制为包含div

确切的解决方案是升级到最新的2.3.0版本，或者应用
（jQuery工具提示插件）将这个diff（github）添加到您的jQuery工具提示插件中。

然后你可以让所有的弹出窗口行为相同（主要是因为你正在委托popover初始化到另一个框架）：

  $。FN。 popover.defaults.container ='body'; 
  

检查 fixed fiddle 。

---

或者您可以使用选项弹出popover：

  $（'。popover'）。popover（{
 container：'body'
 }）; 
  

I'm using Bootstrap 2.2 popovers in conjunction with FullCalendar but they are being clipped by the calendar's CSS when they appear near the edges - see the fiddle here: http://jsfiddle.net/nzxyY/6/

The calendar has several divs containing the content but I suspect this is the main culprit:

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

Is there a CSS hack I can use to make the popover avoid the overflow:hidden constraints imposed by FullCalendar for its contents? There are benefits to having the popover tied to the internal calendar DOM elements (e.g. scrolling) but it currently has the disadvantage of being clipped. I've tried changing the above rule to overflow:visible but that didn't work. Appreciate any thoughts on this.

解决方案

There are others questions that can be solved by the same solution, but the context is too much different each time :

• Make bootstrap popover overlap
• Bootstrap popover clipped to extent of containing div

The definite solution is to upgrade to the last 2.3.0 version, or apply this diff (github) to your jQuery tooltip plugin (because popover inherits tooltip behavior).

Then you can make all popover behave the same (mostly because you are delegating the popover initialization to another framework) :

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

Check the fixed fiddle.

---

Or you can use the option popover by popover :

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

这篇关于我在fullcalendar上的弹出窗口正在被剪辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！