bootstrap-datetimepicker时间选择插件picker view dropdown menu显示位置异常

最新推荐文章于 2022-08-11 16:36:20 发布

subwaysamurai

最新推荐文章于 2022-08-11 16:36:20 发布

阅读量391

点赞数

分类专栏： CSS 前端

本文链接：https://blog.csdn.net/GahoYeung/article/details/108420658

版权

前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

事情是这样的，由于最近在做大屏展示的项目，然后刚好需求是显示分辨率为5760x1080，所以在项目一开始的时候做了这么一个设置，方便在普通显示器上调试。

<body>
    <div class="container">
    ...
    </div>
<body>

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.container {
    margin: 0;
    padding: 0;
    width: 5760px;
    min-width: 5760px;
    max-width: 5760px;
    height: 100%;
    overflow: auto;
}
@media (max-width: 1920px) {
    .container {
        width: 1920px;
        min-width: 1920px;
        max-width: 1920px;
    }
}

然后项目中有需要选择时间的需求，所以就用了bootstrap-datetimepicker这个插件，结果出来的时候惊了，显示时间选择视图的dropdown menu直接跑到一个非预期位置去了，用于初始化插件的input元素的jquery offset left为3278，但是插件的dropdown menu的left设为了1701。。。

然后就开始打断点调试，然后插件源码中找到了原因。

因为插件源码中获取了body元素的clientWidth属性来计算，而因为我的宽度是设在container元素上的，所以body元素的clinetWidth就是viewport宽度，即1921。

通过把宽度设置在body上可以解决这个问题。

<body>
    <div class="container-fluid">
    ...
    </div>
</body>

body {
    width: 5760px;
    min-width: 5760px;
    max-width: 5760px;
}
@media (max-width: 1920px) {
    body {
        width: 1920px;
        min-width: 1920px;
        max-width: 1920px;
    }
}
.container-fluid {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
}

subwaysamurai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-datetimepicker时间选择插件picker view dropdown menu显示位置异常

事情是这样的，由于最近在做大屏展示的项目，然后刚好需求是显示分辨率为5760x1080，所以在项目一开始的时候做了这么一个设置，方便在普通显示器上调试。<body> <div class="container"> ... </div><body>html,body { margin: 0; padding: 0; height: 100%;}.container { margin: 0;
复制链接

扫一扫

专栏目录