如何调整 twitter 引导弹出框的大小？

Question

我在我的 mvc 项目中使用引导程序。我对引导弹出窗口小部件有疑问。我已经为弹出窗口小部件创建了一个自定义敲除绑定，这里是代码：

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

我想在具有可变文本消息和可变大小的任何元素上初始化弹出框。一切正常，但是当我更改弹出框的默认宽度而不是第一次打开时，它的位置不正确（请检查小提琴中的行为）。

小提琴中有一些代码行，如果您取消注释，则可以解决此问题。但我觉得这是一种 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

初始化弹出框后，您正在更改宽度。计算出的弹出框的左上角位置保持不变，但宽度变小了。这导致高度变得更大。

您需要对事件重新排序，以便在初始化弹出框之前应用宽度。