如何調整twitter bootstrap popover的大小？

Question

我在我的mvc項目中使用bootstrap。 我有一個bootstrap popover小部件的問題。 我為popover小部件創建了一個自定義的敲除綁定，這里是代碼：

檢查小提琴

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

我想在任何帶有可變文本消息和可變大小的元素上初始化popover。 每件事情都沒問題，但是當我改變彈出窗口的默認寬度時，它比第一次打開它的位置是不正確的（請檢查小提琴中的行為） 。

小提琴中有一些代碼，如果你取消注釋，這個問題就解決了。 但我覺得這是一種hacky方法，我想要一些更好的方法來處理，如果有的話？

Answer 1

這是我使用的示例初始化。

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

如您所見，它使用自定義模板。 該模板使用自定義popover-medium類。

然后我有一個CSS選擇器

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

如果需要，您也可以在模板類上設置樣式。

Answer 2

DEMO

試試這個我編輯了你的代碼

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

只需添加此CSS

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

希望這有幫助謝謝

Answer 3

初始化彈出框后，您正在更改寬度。 彈出的計算左上角位置保持不變，但寬度變小。 這導致高度變大。

您需要重新排序事件，以便在初始化彈出窗口之前應用寬度。