热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

bootstrapdatetimepicker控件位置异常的解决方法

这篇文章主要为大家详细介绍了bootstrapdatetimepicker控件位置异常的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

今天在写毕设的时候,用到了bootstrap-datetimepicker作为日期控件。

在git上clone下最新的代码,运行demo,发现控件区域整体下移1000px左右。

作为一个准备拿来就用的后台程序猿,此刻我的内心是崩溃的…

百度了很久,没有找到对应的解决方案,于是自己动手去源码修改。

最终解决方案:

打开源码,的bootstrap-datetimepicker.js文件

line 527行,打开这一段注释即可

 /*if (this.pickerPosition == 'top-left' || this.pickerPosition == 'top-right') {
    top = offset.top - this.picker.outerHeight();
   } else {
    top = offset.top + this.height;
   }*/

如果看着还是不是很舒服的话,建议注释掉line 533 - line 544

top = top - containerOffset.top + 169;
left = left - containerOffset.left + 210;

为什么要这样解决呢?

  place: function () {
   if (this.isInline) return;

   if (!this.zIndex) {
    var index_highest = 0;
    $('div').each(function () {
     var index_current = parseInt($(this).css('zIndex'), 10);
     if (index_current > index_highest) {
      index_highest = index_current;
     }
    });
    this.zIndex = index_highest + 10;
   }

   var offset, top, left, containerOffset;
   if (this.container instanceof $) {
    cOntainerOffset= this.container.offset();
   } else {
    cOntainerOffset= $(this.container).offset();
   }

   if (this.component) {
    offset = this.component.offset();
    left = offset.left;
    if (this.pickerPosition == 'bottom-left' || this.pickerPosition == 'top-left') {
     left += this.component.outerWidth() - this.picker.outerWidth();
    }
   } else {
    offset = this.element.offset();
    left = offset.left;
   }

   var bodyWidth = document.body.clientWidth || window.innerWidth;
   if (left + 220 > bodyWidth) {
    left = bodyWidth - 220;
   }

   /*if (this.pickerPosition == 'top-left' || this.pickerPosition == 'top-right') {
    top = offset.top - this.picker.outerHeight();
   } else {
    top = offset.top + this.height;
   }*/

   top = top - containerOffset.top + 169;
   left = left - containerOffset.left + 210;

   this.picker.css({
    top:  top,
    left:  left,
    zIndex: this.zIndex
   });
  },

上面就是相关的源码,可以看到,注释了line 527行之后,在后面引用了一个未初始化过的top变量

嗯… 这是一个没经过测试就提交的小BUG…

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文探讨了如何在 PHP 的 Eloquent ORM 中实现数据表之间的关联查询,并通过具体示例详细解释了如何将关联数据嵌入到查询结果中。这不仅提高了数据查询的效率,还简化了代码逻辑。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 本文介绍了多个适用于用户界面设计的Canvas框架,帮助开发者选择最适合的工具。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 摘要:为了解决下载速度慢的问题,本文介绍了一种高效的下载方法,并提供了详细的步骤和工具推荐。通过使用百度网盘分享功能,可以显著提高文件传输效率。 ... [详细]
  • 根据最新发布的《互联网人才趋势报告》,尽管大量IT从业者已转向Python开发,但随着人工智能和大数据领域的迅猛发展,仍存在巨大的人才缺口。本文将详细介绍如何使用Python编写一个简单的爬虫程序,并提供完整的代码示例。 ... [详细]
  • 本文探讨了如何在日常工作中通过优化效率和深入研究核心技术,将技术和知识转化为实际收益。文章结合个人经验,分享了提高工作效率、掌握高价值技能以及选择合适工作环境的方法,帮助读者更好地实现技术变现。 ... [详细]
  • 深入解析TCP/IP五层协议
    本文详细介绍了TCP/IP五层协议模型,包括物理层、数据链路层、网络层、传输层和应用层。每层的功能及其相互关系将被逐一解释,帮助读者理解互联网通信的原理。此外,还特别讨论了UDP和TCP协议的特点以及三次握手、四次挥手的过程。 ... [详细]
author-avatar
longfeiPHP
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有