뷰포트 내부에서 부트 스트랩 팝 오버 유지

Question

버튼이있는 사이드 바를 사용하여 메뉴를 만들려고합니다. 각각의 버튼에는 관련 데이터가 포함 된 할당 된 팝업이 있습니다. 불행히도, popovers 중 하나가 임의의 수의 행을 포함 할 수 있으며 일부 경우 뷰포트 외부에있을 수도 있습니다.

내가 프로그래밍 방식으로 정의 된 값으로 팝 오버의 상단을 바꿀 수 있다고 생각

(클릭 "작업"버튼) 문제의 예를 들어 http://jsfiddle.net/bfd9f/1/를 참조 할 때 (뷰포트 외부 즉,) 부정적이고이 작업을 수행하는 방법 , 나는 이미 show.bs.popover 이벤트를 듣는 동안 popover의 첫 번째 div에 대한 참조를 얻을 수있었습니다. 불행하게도, 아직 렌더링되지 않았기 때문에 크기가 (23, 107) 인 반면 (300, xxx)와 (0, 0)이어야합니다.

이 문제를 해결할 방법이 있습니까? 어쩌면 팝 오버가 먼저 그것을 측정하기 위해 오프 스크린으로 렌더링 될까요? 그렇다면 어떻게해야합니까? 그것이 미래의 CSS를 방해 할 수로

감사

Answer 1

나는 믿습니다 http://jsfiddle.net/pkP77/1/이

이미 그 생각 .. 불행히도 모든 popovers에 영향을 미칠 것 https://github.com/twbs/bootstrap/pull/12328

Answer 2

당신은 항상

.popover { 
     width: 300px !important; 
     top: 0px !important; 
    } 

http://jsfiddle.net/smurphy/x9hnk/

변경이 최고의 장기 계획을하지 않을 수 있습니다 !important 를 사용하여 팝 오버의 top 값을 대체 할 수 있습니다

업데이트 :

이벤트가 중단됩니다. 이것은 유능한 것으로 보인다.

$('.btn-popover').on('shown.bs.popover', function (event) { 
    //Set timeout to wait for popup div to redraw(animation) 
    setTimeout(function(){ 
     if($('div.popover').css('top').charAt(0) === '-'){ 
      $('div.popover').css('top', '0px'); 
      var buttonTop = $(event.currentTarget).position().top; 
      var buttonHeight = $(event.currentTarget).height(); 
      $('.popover.left>.arrow').css('top', buttonTop + (buttonHeight/2)); 
     } 
    },100); 
}); 

http://jsfiddle.net/smurphy/e6YaY/2/

이이 버튼을 사용하여 화살표를 정렬합니다. 곧 부트 스트랩 v3.2.0에서 수정