Wie verändere ich die Größe von Twitter Bootstrap Popover?

Question

Ich verwende Bootstrap in meinem MVC-Projekt. Ich habe ein Problem mit dem Bootstrap-Popover-Widget. Ich habe eine benutzerdefinierte Knockout-Bindung für popover Widget erstellt, hier den Code:

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()); 

Ich möchte mit variabler Textnachricht auf ein beliebiges Element popover initialisieren und mit variabler Größe. Jedes Ding geht in Ordnung, aber wenn ich die Standardbreite des Popover als beim ersten Mal ändern, wenn es geöffnet ist, ist seine Position nicht korrekt (überprüfen Sie bitte das Verhalten in Geige).

Es gab eine Reihe von Code in der Geige, die, wenn Sie als Kommentar dieses Problem lösen. Aber ich denke, es ist ein hacky Ansatz, ich möchte einen besseren Weg, wenn es welche gibt?

Answer 1

Sie ändern die Breite nach der Initialisierung des Popover. Die berechnete obere linke Position des Popover bleibt an Ort und Stelle, aber die Breite wird kleiner. Dies bewirkt, dass die Höhe größer wird.

Sie müssen Ihre Ereignisse neu anordnen, damit die Breite angewendet wird, bevor das Popover initialisiert wird.

Answer 2

DEMO

Try this Ich habe den Code bearbeitet

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()); 

gerade dieses css hinzufügen

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

this helps Danke

Answer 3

Hier ist ein s reichlich Initialisierung, die ich verwende.

$(".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>', 
     }); 

Wie Sie sehen können, verwendet es eine benutzerdefinierte Vorlage. Die Vorlage verwendet eine benutzerdefinierte Popover-Medium-Klasse.

Ich habe dann einen CSS-Selektor

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

Sie auch einen Stil auf der Template-Klasse nur einstellen könnte, wenn man wollte.