Làm cách nào để thay đổi kích thước cửa sổ bật lên twitter bootstrap?

Question

Tôi đang sử dụng bootstrap trong dự án mvc của mình. Tôi gặp sự cố với tiện ích bật lên bootstrap. Tôi đã tạo ra một loại trực tiếp tùy chỉnh bắt buộc đối với phụ tùng popover, đây mã:

Check fiddle

ko.bindingHandlers.popover = { 
     init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var options = ko.utils.unwrapObservable(valuesAccessor() || {}); 

      options.html = true; 

      options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>'; 

      $(element).popover(options); 
     }, 
     update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var extraOptions = allBindingsAccessor().popoverOptions; 

      $(element).popover(extraOptions.observable() ? "show" : "hide"); 
      $(element).siblings('.popover').css({ width: '150px' }); 

      //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE 

      //if(extraOptions.observable()) 
       //$(element).popover('show'); 
     } 
    }; 

    function vm() { 
     var self = this; 

     self.isVisible = ko.observable(false); 

     self.open = function() { 
      self.isVisible(!self.isVisible()); 
     }; 
    } 

    ko.applyBindings(new vm()); 

Tôi muốn khởi tạo popover trên bất kỳ phần tử với tin nhắn văn bản thay đổi và với kích thước khác nhau. Mọi thứ đều ổn nhưng khi tôi thay đổi chiều rộng mặc định của cửa sổ bật lên so với lần đầu tiên khi mở vị trí của nó là không chính xác (vui lòng kiểm tra hành vi trong fiddle).

Có một số dòng mã trong fiddle mà nếu bạn bỏ ghi chú hơn vấn đề này giải quyết. Nhưng tôi cảm thấy nó là một cách tiếp cận hacky, tôi muốn một số cách tốt hơn để xử lý nếu có bất kỳ?

Answer 1

Bạn đang thay đổi chiều rộng sau khi khởi tạo cửa sổ bật lên. Vị trí trên cùng bên trái của cửa sổ bật lên được giữ nguyên, nhưng chiều rộng sẽ nhỏ hơn. Điều này làm cho chiều cao lớn hơn.

Bạn sẽ cần phải sắp xếp lại các sự kiện để chiều rộng được áp dụng trước khi bật lên cửa sổ bật lên.

Answer 2

DEMO

Hãy thử điều này tôi đã chỉnh sửa mã của bạn

ko.bindingHandlers.popover = { 
     init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var options = ko.utils.unwrapObservable(valuesAccessor() || {}); 



      options.html = true; 

      options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>'; 

      $(element).popover(options); 


     }, 
     update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var extraOptions = allBindingsAccessor().popoverOptions; 

      $(element).popover(extraOptions.observable() ? "show" : "hide"); 


      //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE 

      //if(extraOptions.observable()) 
       //$(element).popover('show'); 
     } 
    }; 

    function vm() { 
     var self = this; 

     self.isVisible = ko.observable(false); 

     self.open = function() { 
      self.isVisible(!self.isVisible()); 
     }; 
    } 

    ko.applyBindings(new vm()); 

chỉ cần thêm css này

.popover { 
    max-width: 150px; 
    width: auto; 
} 

Hope this helps Cảm ơn bạn

Answer 3

Dưới đây là một s khởi tạo dồi dào mà tôi sử dụng.

$(".property-price") 
    .popover({ 
      trigger: "hover", 
      placement: 'bottom', 
      toggle : "popover", 
      content : "The from price is calculated ba....the dates selected.", 
      title: "How is the from price calculated?", 
      container: 'body', 
      template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>', 
     }); 

Như bạn có thể thấy, nó sử dụng mẫu tùy chỉnh. Mẫu sử dụng lớp popover-medium tùy chỉnh.

sau đó tôi có một CSS selector

.popover-medium { 
    max-width: 350px; 
} 

Bạn cũng có thể chỉ cần đặt một phong cách trên lớp mẫu nếu bạn muốn.