Jak zmienić rozmiar poppera na twitter bootstrap?

Question

Używam bootstrap w moim projekcie mvc. Mam problem z widgetem popover bootstrap. Stworzyłem niestandardowe wiążącej dla widget popover, tutaj kod nokaut:

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

chcę zainicjować popover na dowolny element o zmiennej wiadomości tekstowej oraz o zmiennej wielkości. Wszystko idzie dobrze, ale kiedy zmieniam domyślną szerokość popover niż za pierwszym razem, kiedy otwiera się jego pozycja jest nieprawidłowa (proszę sprawdzić zachowanie w skrzypcach).

W skrzypcach było trochę wierszy kodu, które usuniesz, jeśli rozwiążesz ten problem. Ale czuję, że jest to podejście hacky, chcę lepszy sposób obsługi, jeśli istnieje?

Answer 1

Zmieniasz szerokość po zainicjowaniu popover. Obliczona górna lewa pozycja popover pozostaje na miejscu, ale szerokość zmniejsza się. To powoduje, że wysokość staje się większa.

Musisz zmienić kolejność zdarzeń, aby szerokość była stosowana przed zainicjowaniem programu Popover.

Answer 2

DEMO

Spróbuj to ja edytowany kod

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

tylko dodać to CSS

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

nadzieję, że to pomaga Dziękuję

Answer 3

Oto s wystarczająca inicjalizacja, której używam.

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

Jak widać, wykorzystuje niestandardowy szablon. Szablon wykorzystuje niestandardową klasę popover-medium.

Mam następnie selektora CSS

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

Można też po prostu ustawić styl na klasy szablonu, jeśli chciał.