加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

bootstrap datepicker 在bootstrap modal中不显示问题

发布时间:2020-12-17 21:09:28 所属栏目:安全 来源:网络整理
导读:?? 在普通的网页中显示datepicker比较简单,将bootstrap-datepicker-zh_CN.js 和?bootstrap-datepicker.css 拷贝到rails工程中相应的assets目录中,并在application.js 和 application.css文件中加载这两个文件 //= require bootstrap-datepicker-zh_CN ?*=
??

在普通的网页中显示datepicker比较简单,将bootstrap-datepicker-zh_CN.js 和?bootstrap-datepicker.css

拷贝到rails工程中相应的assets目录中,并在application.js 和 application.css文件中加载这两个文件

//= require bootstrap-datepicker-zh_CN

?*= require bootstrap-datepicker

最后在 在指定的文本域中加入事件即可$("#dp1,#dp2,#dp3").datepicker()



?

在使用bootstrap modal的时候,把表单的内容放在了modal中,但是日期控件的显示总是在最底层

解决办法:在.datepicker 中加上z-index的控制,css中z-index是用来控制预算的堆叠顺序的,默认是auto

也就是说通过它可以设置datepicker控件的堆叠顺序,这里把z-index设置为 9999,就可以保证日期控件总

是显示在最前端了

?

修改前:

Html代码 ??

  1. .datepicker?{???
  2. top:?0;???
  3. left:?0;???
  4. padding:?4px;???
  5. margin-top:?1px;???
  6. -webkit-border-radius:?4px;???
  7. -moz-border-radius:?4px;???
  8. border-radius:?4px;???
  9. }??

?修改后:

Html代码 ?? .datepicker?{??
  • z-index:?9999;??
  • top:?0;??
  • left:?0;??
  • padding:?4px;??
  • margin-top:?1px;??
  • -webkit-border-radius:?4px;??
  • -moz-border-radius:?4px;??
  • border-radius:?4px;??
  • }??
  • ?

    可以直接修改datepicker.css文件,我这里使用了bootstrap,所以在bootstrap_and_overrides.css.less中修改也可以

    Html代码 ?? @import?"twitter/bootstrap/bootstrap";??
  • body?{?padding-top:?60px;?}???
  • .datepicker?{??
  • }??
  • @import?"twitter/bootstrap/responsive";??
  • ?

    That's all!~

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读