My popups on fullcalendar are being clipped

问题

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.

回答1:

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

回答2:

Instead of using overflow: hidden you could use a clearfix. Bootstrap already includes one (as a LESS mixin).

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

来源：https://stackoverflow.com/questions/14799842/my-popups-on-fullcalendar-are-being-clipped

标签

css

twitter-bootstrap

fullcalendar