gpt4 book ai didi

javascript - 如何修复日期选择器调整大小响应问题?

转载 作者:行者123 更新时间:2023-11-28 00:24:24 25 4
gpt4 key购买 nike

我正在我的 laravel 元素中设置一个新的插件日期选择器

并希望解决调整到移动 View 时的响应问题

这是我从他网站的日期选择器创建者报价列表中选择的自定义代码:

$(function() {
$("#input1").persianDatepicker({

theme: 'melon',
alwaysShow: 1,
cellWidth: 36,
cellHeight: 20,
fontSize: 15,
calendarPosition: {
x: 0,
y: -93,
},
});

});

这是我将日期选择器放入其中的 div 结构:

<div class="container-fluid">

<div class="container">


<div class="row my-4 justify-content-center">


<div class="col-xl-3">

<div class="card bg-light py-4 mb-3">

<div class="bg-light py-5">

<div class="py-5 bg-light">

<div id="input1"></div>

</div>

</div>

</div>
<div class="card bg-primary py-4"></div>
<div class="card bg-primary py-4"></div>
</div>


<div class="col-xl-9">

</div>
</div>
</div>
</div>

在笔记本电脑 View 中,我有下面的图片:

enter image description here

在移动 View 中(iphone 6/7/8)我有下面的图片:

enter image description here

所以我想你能理解我的问题是什么

问题是当有人在移动设备上打开我的页面时,日历向左移动,我不知道

如何告诉日历框跟随父 div 大小并始终适合父级内部的全尺寸

笔记本电脑 View

有关更多信息这是此插件的发布者:


Datepicker

最佳答案

添加这个CSS:

#input1 {
width: 100%;
}

或者你可以这样做:

 <div id="input1" style="width:100%;"></div>

关于javascript - 如何修复日期选择器调整大小响应问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54717920/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com