giữ cửa sổ bật lên bootstrap bên trong khung nhìn

Question

Tôi đang cố gắng tạo menu bằng cách sử dụng thanh bên có nút, mỗi nút có cửa sổ bật lên được chỉ định chứa dữ liệu có liên quan. Thật không may, một trong các cửa sổ bật lên có thể chứa một số hàng tùy ý và trong một số trường hợp, nó có thể nằm ngoài khung nhìn.

Xem http://jsfiddle.net/bfd9f/1/ cho một ví dụ về vấn đề này (nhấp vào nút "Nhiệm vụ")

Tôi nghĩ tôi có thể lập trình thay đổi hàng đầu của popover đến một giá trị xác định, khi tiêu cực (tức là ngoài chế độ) và để làm điều này , Tôi đã quản lý để có được một tham chiếu đến div đầu tiên của cửa sổ popover trong khi nghe sự kiện show.bs.popover. Thật không may, tôi nghĩ do thực tế là nó không được trả lại, nó dường như có kích thước (23, 107) trong khi nó phải là một cái gì đó như (300, xxx) và một vị trí của (0, 0).

Có cách nào để giải quyết vấn đề này không? có thể hiển thị offover offscreen đầu tiên để đo nó? nếu có, tôi sẽ làm như thế nào?

Cảm ơn

Answer 1

cố định trong v3.2.0 Bootstrap sắp tới tôi tin rằng: http://jsfiddle.net/pkP77/1/

Courtesy trong những tính năng mới được giới thiệu trong viewporthttps://github.com/twbs/bootstrap/pull/12328

Answer 2

Bạn luôn có thể ghi đè giá trị top của popover sử dụng !important Điều này có thể không phải là kế hoạch dài hạn tốt nhất vì nó có thể gây trở ngại cho CSS tương lai thay đổi

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

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

Cập nhật:

Tắt sự kiện bạn m entioned này dường như làm việc.

$('.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/

này gắn vào mũi tên với nút bấm của bạn.