使用select2時Bootstrap popover錯誤放置

Question

當我在日曆中點擊某天（使用jQuery FullCalendar）時，我設置了一個彈出窗口，它定位良好，直到我將select2添加到我的表單元素。

問題是它應該出現在日期30，但它的定位非常糟糕。

這裏是我的酥料餅的代碼（當顯示的酥料餅選擇2初始化），並在此之後太一的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

它改變位置，因爲位置是基於popover的dimansions和select2改變的。

正確的方法是樣式選擇2（check their documentation），然後更改定位。

如果你想快速修復positionning你可以給酥料餅它曾經有dimansins：

jsfiddle

我只加了尺寸爲酥料餅的CSS：

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