jQuery 如何调整 twitter bootstrap popover 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18319562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize twitter bootstrap popover?
提问by user1740381
I am using bootstrap in my mvc project. I have an issue with bootstrap popover widget. I have created a custom knockout binding for popover widget, here the code :
我在我的 mvc 项目中使用引导程序。我有引导程序弹出窗口小部件的问题。我为弹出窗口小部件创建了一个自定义淘汰赛绑定，这里的代码：
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());
I want to initialize popover on any element with variable text message and with variable size. Every thing goes ok but when i change the default width of the popover than on first time when it open its position is not correct (please check the behavior in fiddle).
我想用可变文本消息和可变大小在任何元素上初始化弹出窗口。一切正常，但是当我更改弹出框的默认宽度时，它的位置比第一次打开时的位置不正确（请检查小提琴中的行为）。
There was some line of code in the fiddle which if you uncomment than this issue solve. But i feel it is a hacky approach, i want some better way to handle if there is any ?
小提琴中有一些代码行，如果你取消注释，这个问题就解决了。但我觉得这是一种hacky方法，如果有的话，我想要一些更好的方法来处理？
回答by Layke
Here's a sample initialization that I use.
这是我使用的示例初始化。
$(".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>',
});
As you can see, it uses a custom template. The template uses a custom popover-medium class.
如您所见，它使用自定义模板。该模板使用自定义 popover-medium 类。
I then have a CSS selector
然后我有一个 CSS 选择器
.popover-medium {
max-width: 350px;
}
You could also just set a style on the template class if you wanted.
如果需要，您也可以在模板类上设置样式。
回答by SarathSprakash
Try this I have edited your code
试试这个我已经编辑了你的代码
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());
just add this css
只需添加这个css
.popover {
max-width: 150px;
width: auto;
}
Hope this helps Thank you
希望这有帮助 谢谢
回答by isherwood
You're changing the width after initializing the popover. The calculated top left position of the popover stays in place, but the width gets smaller. This causes the height to get greater.
您在初始化弹出窗口后更改宽度。计算出的 popover 左上角位置保持不变，但宽度变小。这导致高度变得更大。
You'll need to reorder your events so that width is applied before popover is initialized.
您需要对事件重新排序，以便在初始化 popover 之前应用宽度。
