javascript - 使用 select2 时 Bootstrap popover 放置错误

Question

我已经设置了一个弹出窗口，当你点击我日历中的一天时弹出窗口(使用 jQuery FullCalendar)，它的位置很好，直到我将 select2 添加到我的表单元素中。

问题是它应该在日期 30 出现，但它的定位非常糟糕。

这是我的弹出窗口代码(显示弹出窗口时初始化 select2)和此后的 jsFiddle:

cell.popover(
                    {
                        html: true,
                        title: '<div id="popover-head">Aggiungi Appuntamento</div>',
                        content: ['<div id="popover-content">',
                            '<div data-type="alert" class="alert alert-info hide" style="margin-bottom: 10px;">',
                '<strong>Usati: </strong> <span data-type="remaining"></span>/<span data-type="total"></span></div>',
                '<form data-form="shtoTakim" action="utente/shtoTakim" method="post" style="margin-bottom: 0;">',
                '<div class="controls controls-row">',
                    '<div class="control-group" style="margin-bottom: 0;">',
                        '<div class="controls">',
                            '<select name="type" class="span2">',
                                '<option value>Seleziona tipo</option>',
                            '</select>',
                        '</div>',
                    '</div>',
                    '<div class="control-group" style="margin-bottom: 0;">',
                        '<div class="controls pull-right">',
                            '<select name="timezone" class="span1">',
                                '<option value="0">AM</option>',
                                '<option value="1">PM</option>',
                            '</select>',
                        '</div>',
                    '</div>',
                '</div>',
                '<div class="controls controls-row">',
                '<div class="control-group" style="margin-bottom: 0;">',
                    '<div class="controls">',
                        '<select name="province" class="span3">',
                            '<option value>Seleziona provincia</option>',
                        '</select>',
                    '</div>',
                '</div>',
                '</div>',
                '<div class="controls controls-row">',
                    '<div class="control-group" style="margin-bottom: 0;">',
                        '<div class="controls controls-row">',
                            '<select name="comune" class="span2" data-placeholder="Comune.." multiple disabled>',
                            '</select>',
                            '<input name="cap" class="span1" type="text" value="" placeholder="CAP" />',
                        '</div>',
                    '</div>',
                '</div>',
                '<div class="controls controls-row">',
                '<span class="label label-important pull-left hide" data-type="warn" style="margin-top: 6px;">Daily limit exceeded</span> <div data-type="spinner" class="pull-right"><button type="submit" class="btn btn-primary input-small">Aggiungi</button></div>',
                '</div>',
                '</form>',
                '</div>',
                '<span data-type="date" class="hide">' + cellDate.getFullYear() + '/' + (cellDate.getMonth() + 1) + '/' + cellDate.getDate() + '</span>'].join(''),
                        placement: function(tip, element) {
                            var $element, above, actualHeight, actualWidth, below, boundBottom, boundLeft, boundRight, boundTop, elementAbove, elementBelow, elementLeft, elementRight, isWithinBounds, left, pos, right;
                            isWithinBounds = function(elementPosition) {
                                return boundTop < elementPosition.top && boundLeft < elementPosition.left && boundRight > (elementPosition.left + actualWidth) && boundBottom > (elementPosition.top + actualHeight);
                            };
                            $element = $(element);
                            pos = $.extend({}, $element.offset(), {
                                width: element.offsetWidth,
                                height: element.offsetHeight
                            });
                            actualWidth = 410;
                            actualHeight = 200;
                            boundTop = $(document).scrollTop();
                            boundLeft = $(document).scrollLeft();
                            boundRight = boundLeft + $(document).width();
                            boundBottom = boundTop + $(document).height();
                            elementAbove = {
                                top: pos.top - actualHeight,
                                left: pos.left + pos.width / 2 - actualWidth / 2
                            };
                            elementBelow = {
                                top: pos.top + pos.height,
                                left: pos.left + pos.width / 2 - actualWidth / 2
                            };
                            elementLeft = {
                                top: pos.top + pos.height / 2 - actualHeight / 2,
                                left: pos.left - actualWidth
                            };
                            elementRight = {
                                top: pos.top + pos.height / 2 - actualHeight / 2,
                                left: pos.left + pos.width
                            };
                            elementBottomRight = {
                                top: pos.top + pos.height,
                                left: pos.left + pos.width / 2 - (actualWidth * 0.8)
                            };
                            elementBottomLeft = {
                                top: pos.top + pos.height,
                                left: pos.left + pos.width / 2 - (actualWidth * 0.2)
                            };
                            elementTopRight = {
                                top: pos.top - actualHeight,
                                left: pos.left + pos.width / 2 - (actualWidth * 0.8)
                            };
                            elementTopLeft = {
                                top: pos.top - actualHeight,
                                left: pos.left + pos.width / 2 - (actualWidth * 0.2)
                            };
                            above       = isWithinBounds(elementAbove);
                            below       = isWithinBounds(elementBelow);
                            left        = isWithinBounds(elementLeft);
                            right       = isWithinBounds(elementRight);
                            bottomRight = isWithinBounds(elementBottomRight);
                            bottomLeft  = isWithinBounds(elementBottomLeft);
                            topRight    = isWithinBounds(elementTopRight);
                            topLeft     = isWithinBounds(elementTopLeft);

                            if (above) {
                                return "top";
                            } else if (topRight) {
                                return "top-right";
                            } else if (topLeft) {
                                return "top-left";
                            }

                            else if (below) {
                                return "bottom";
                            } else if (bottomRight) {
                                return "bottom-right";
                            } else if (bottomLeft) {
                                return "bottom-left";
                            }

                            else if(left) {
                                return "left";
                            } else if(right) {
                                return "right";
                            } else {
                                // default
                                return "bottom";
                            }
                        },
                        animation: false,
                        trigger: 'manual',
                        container: 'body'
                        /*callback: function(){
                            $('.select2').select2();
                        }*/
                    });

我重新创建了一个带有按钮的 jsFiddle 供您查看，尝试注释掉 select2 初始化，看看没有它它也能正常工作。我也尝试过 selectize.js，但它仍然出现同样的问题。

这是 jsFiddle:http://jsfiddle.net/qHQg4/ (调整按钮边距，使弹出窗口位于顶部)。

Answer 1

它改变了位置，因为位置是基于弹出窗口的维度，而 select2 改变了它。

正确的方法是设置 select2 ( check their documentation) 的样式，然后更改定位。

如果你想快速修复定位，你可以给 popover 它曾经拥有的维度:

jsfiddle

我只将弹出窗口的尺寸添加到 css:

.popover{width: 249px; height: 304px;}