Fullcalendar bootstrap popover 被隐藏
[英]Fullcalendar bootstrap popover gets hidden
问题描述
I have problems with my bootstrap popovers gets hidden under the rows in full calendar.
我的引导程序弹出窗口有问题隐藏在完整日历中的行下。 I call the function eventRender.我调用函数 eventRender。
I have tried container: 'body' , it doesn't work.我试过container: 'body' ，它不起作用。 Also trigger: 'focus' doesn't work either.也trigger: 'focus'也不起作用。
As you can see its a function, and it gets called after AJAX: success..if that's what's causing this problem?正如你所看到的，它是一个函数，它在 AJAX 之后被调用：成功......如果这就是导致这个问题的原因？
My Code:我的代码：
function showCalendar(userID){ $('#calendar').fullCalendar({ header: { left: 'prev,next today,month', center: 'title', right: 'prevYear,nextYear' }, selectable: true, selectHelper: true, eventRender: function(event, element){ var dStart = event.start.format("DD MMMM"); element.popover({ animation:true, placement:'top', html:true, title:dStart, trigger: 'click' }); }, showNonCurrentDates:false, weekNumbersWithinDays:true, locale: 'sv', weekNumbers: true, navLinks: true, // can click day/week names to navigate views editable: true, eventLimit: true, // allow "more" link when too many events eventSources: [ // your event source { url: 'DATA/events.json' , type: 'GET', data: { userID: userID }, error: function() { alert('there was an error while fetching events!'); } } ] }); }1 个解决方案
解决方案1
2 已采纳 2017-09-27 13:38:18
The documentation at https://getbootstrap.com/docs/3.3/javascript/#popovers states: https://getbootstrap.com/docs/3.3/javascript/#popovers 上的文档指出：
When using popovers on elements within a
.btn-groupor an.input-group, or on table-related elements (<td>,<th>,<tr>,<thead>,<tbody>,<tfoot>), you'll have to specify the optioncontainer: 'body'(documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered)..btn-group或.input-group中的元素或与表格相关的元素（<td>、<th>、<tr>、<thead>、<tbody>、<tfoot>）上使用弹出框时，您必须指定选项container: 'body'（记录如下）以避免不必要的副作用（例如当触发弹出框时元素变宽和/或失去圆角）。
In your particular case I think the top of the popovers are being hidden because they are appended to the DOM within the <td> of the calendar cell, but are too big for it, so because of the absolute positioning used, any part of the popover which falls outside the dimensions of the <td> gets clipped.在您的特定情况下，我认为弹出窗口的顶部被隐藏，因为它们被附加到日历单元的<td>内的 DOM，但对于它来说太大了，因此由于使用了绝对定位，超出<td>尺寸的 popover 被剪裁。 I'm not absolutely 100% sure this is the correct technical reason, but from observation that's what appears to be happening (eg, if you change the popover's "top" value from -30px to -10px, you can see more of it, but the top bit outside the calendar day cell is still missing).我不是绝对 100% 确定这是正确的技术原因，但从观察来看，这似乎是正在发生的事情（例如，如果您将弹出窗口的“顶部”值从 -30px 更改为 -10px，您可以看到更多内容，但日历日单元格外的最高位仍然丢失）。
Anyway, to fix it simply add that option to the popover configuration:无论如何，要修复它，只需将该选项添加到弹出框配置中：
element.popover({
animation: true,
placement: 'top',
html: true,
title: dStart,
trigger: 'click',
container: 'body' //extra option
});
This causes the popovers to be appended to the main <body> tag of the DOM, where they are not constrained by a table cell.这会导致弹出框被附加到 DOM 的主要<body>标签，在那里它们不受表格单元格的约束。 Since they are positioned absolutely, they still appear in the right place in relation to the event they are associated with.由于它们是绝对定位的，因此它们仍然出现在与它们相关联的事件相关的正确位置。 You may append it to any DOM element you wish, but body is simplest in this case.您可以将它附加到您希望的任何 DOM 元素，但在这种情况下body是最简单的。
https://jsfiddle.net/pfsfdekp/4/ demonstrates a working version. https://jsfiddle.net/pfsfdekp/4/演示了一个工作版本。
PS You mentioned in the question that you'd tried this already, but from what I can observe in the JSFiddle, there's no reason it shouldn't be possible. PS 你在问题中提到你已经尝试过这个，但从我在 JSFiddle 中观察到的，没有理由不应该这样做。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.