当我点击我的日历中的某一天(使用jQuery FullCalendar)时,我设置了一个popover,并且在我将select2添加到我的表单元素之前它一直处于正常状态。
问题是它应该出现在日期30,但它的定位非常糟糕。
这是我的popover代码(显示弹出窗口时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/(调整按钮边距,使弹出窗口位于顶部)。
答案 0 :(得分:1)
它改变了位置,因为位置是基于弹出窗口的dimansions和select2的变化。
正确的方法是设置select2(check their documentation)样式,然后更改位置。
如果你想快速修复定位,你可以给popover它曾经拥有的dimansins:
我只将popover的尺寸添加到css:
.popover{width: 249px; height: 304px;}