如何调整twitter引导程序popover的大小

How to resize twitter bootstrap popover?

本文关键字：popover 引导程序 twitter 何调整 调整      更新时间：2023-09-26

我在我的mvc项目中使用bootstrap。我有一个引导弹出窗口小部件的问题。我已经为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。一切都很好，但当我改变popover的默认宽度时，它的位置不正确（请检查fiddle中的行为）。

小提琴里有一行代码，如果你取消注释，就会解决这个问题。但我觉得这是一种棘手的方法，我想找一些更好的方法来处理，如果有的话？

下面是我使用的初始化示例。

    $(".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中等类。

然后我有一个CSS选择器

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

如果需要的话，您也可以在模板类上设置一个样式。

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;
}

希望这能有所帮助感谢

初始化popover后更改宽度。计算出的popover左上角位置保持不变，但宽度变小。这会导致高度变大。

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

相关文章：