select2를 사용할 때 부트 스트랩 팝업 배치가 잘못되었습니다.

Question

내 캘린더에서 jQuery FullCalendar를 사용하여 하루를 클릭 할 때 popover를 설정하고 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가이를 변경하기 때문에 위치가 변경됩니다.

적절한 방법은 select2 (check their documentation) 스타일을 지정하고 위치 지정을 변경하는 것입니다.

당신은 당신이 팝 오버 그것을 가지고하는 데 사용되는 dimansins 제공 할 수 있습니다으로 위치에 대한 빠른 수정을 원하는 경우 :

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

:

jsfiddle

나는 단지 CSS에 팝 오버의 치수를 추가를