记用bootstrap时元素没有添加 row 时出现的一个BUG

最近在用Bootstrap的bootstrap-datetimepicker.js插件时出现了一个BUG,弹出的日期选择器位置不对,BUG如下:

《记用bootstrap时元素没有添加 row 时出现的一个BUG》

很明显,选择器往上漂浮了一些位置,分析了下bootstrap-datetimepicker.js这个文件的源码,找到如下代码

[cc lang=”javascript”]
if (this.pickerPosition === ‘top-left’ || this.pickerPosition === ‘top-right’) {
top = offset.top – this.picker.outerHeight();
} else {
top = offset.top + this.height;
}
//console.log(top)  153
top = top – containerOffset.top;
left = left – containerOffset.left;
//console.log(top)  113
this.picker.css({
top: top,
left: left,
zIndex: this.zIndex
});
[/cc]

看来问题的关键就出在 top = top – containerOffset.top;  因为这个原因所以导致结果和预期差了 40px,这里其实可以直接把这一句注释掉解决问题,但是这样处理以后可能会在其它地方出现新的问题,所以我们接着往上找  containerOffset.top

[cc lang=”javascript”]
var offset, top, left, containerOffset;
if (this.container instanceof ) {
containerOffset = this.container.offset();
} else {
containerOffset =
(this.container).offset();
}
//log(containerOffset)  40
[/cc]

继续找,找到 this.container 定义的位置
[cc lang=”javascript”]
this.container = options.container || ‘body’;
[/cc]

去官方文档找了一下:http://www.bootcss.com/p/bootstrap-datetimepicker/ 并没有提到配置 container 的选项,说明这里默认 container 就是 body 了
[cc lang=”javascript”]
$(‘body’).offset()
Object {top: 40, left: 0}
[/cc]
打开浏览器试了下,果然是这样,接下来就是找为什么 body 会有 40px 偏移的问题了

《记用bootstrap时元素没有添加 row 时出现的一个BUG》

最终发现是因为 .page-header 上方有40px的边距导致的问题的产生,为了验证猜想,我给这个div外面加了个 div class = ‘row’ 来试试

《记用bootstrap时元素没有添加 row 时出现的一个BUG》

再次刷新首页,问题已经得到解决

《记用bootstrap时元素没有添加 row 时出现的一个BUG》

收工。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注