ruby-on-rails - YADCF Bootstrap Datetimepicker 从容器溢出
问题描述
我在使用带有 Bootstrap-Datetimepicker 样式选项的 DataTables 的 YADCF 日期过滤器时遇到问题。问题是 Months/Years/ 从下拉容器中溢出。奇怪的是,实际的日期选择看起来不错。我在下面包含了一些屏幕截图。
- 这是月份选择的样子,年份选择看起来是一样的。
- 但是,日期选择看起来很正常,如下所示:
- 我的应用程序中还有其他看起来很正常的日期选择器下拉菜单:
初始化日期过滤器字段如下:
yadcf.init(tableElement.DataTable(), [
{ column_number : 11,
filter_type: "range_date",
datepicker_type: 'bootstrap-datetimepicker',
date_format: 'YYYY-MM-DD',
filter_container_id: 'yadcfDateDiv'
}]);
我似乎无法弄清楚解决这个问题需要什么样式属性。我已经尝试调整几个月的填充/边距(如我发现的其他帖子中所建议的那样),但这只是使它们更靠近在一起,而不是像最后一个屏幕截图那样彼此下方。如果有人有任何想法,将不胜感激。
版本
- YADCF:0.9.4
- 数据表:1.10.16
- Eonasdan/bootstrap-datetimepicker 4.7.14
解决方案
在浏览了Eonasdan/bootstrap-datetimepicker文档后,我发现 DateTimePicker 插件有一个WidgetParent
选项,可用于设置小部件所在的父元素。
由于我通过 YADCF 初始化 DateTimePicker 插件并传入一个 custom filter_container_id
,我发现如果我也将相同的元素传递给WidgetParent
属性,它将按预期显示。
我已将以下代码添加到已解决此问题的页面的 DataTable 初始化函数中:
$('input[id^="#yadcf-filter--orders-datatable"]').data("DateTimePicker").options({
"widgetParent": '#yadcfDateDiv'
});
它选择 DateTimePicker 对象绑定到的 YADCF 插件生成的两个输入字段,并设置适当的父元素。
希望这对未来的 Google 员工有所帮助。
推荐阅读
- matlab - 如何使用 Matlab 的 polyfit 获得适当的曲线拟合?
- scipy - 如何获得x的系数?
- asp.net-core - 在 .net 核心 C# 代码中呈现样式或链接元素
- r - 在行内整齐地重新排列
- c# - 使用 Azure Active Directory 的 Azure Function 身份验证
- python - 通过airflow docker容器执行windows python脚本
- excel - Excel 条件格式 - 多个条件
- python - 获取包含内部元素的 JSON 根元素
- javascript - Dynamics 365 CRM:根据不同实体的状态在表单中显示/隐藏
- javascript - 在第二个循环中使用 jquery 更改主体的背景图像失败