R语言flexdashboard中crosstalk日期filter_slider无法适配容器框问题咨询

问题表现 #

• flexdashboard搭配crosstalk使用日期类型filter_slider组件时，筛选滑块无法正常嵌入仪表盘组件框，存在内容溢出错位
• 增大组件框尺寸无法修复问题，滑块会随容器同步缩放，适配异常始终存在
• 调整CSS padding属性无法解决该问题

可复现问题的示例代码 #

---
title: "test"
output:
  flexdashboard::flex_dashboard
---

```{r setup, include=FALSE}
library(crosstalk)

dat <- data.frame(
  a = seq.Date(from = Sys.Date()-100, to = Sys.Date(), by = "days")
)

dat_shared <- SharedData$new(dat)
```

Column {data-width=800}
-------------------------------------
    
### Filtry
    
```{r}
filter_slider("date", "Date", dat_shared, ~a)
```

Column {data-width=400}
-------------------------------------

问题原因 #

该适配异常是底层依赖样式冲突导致：filter_slider基于ionRangeSlider实现，日期滑块两端的最值标签默认设置了向外的负偏移值，和flexdashboard卡片容器的盒模型计算、溢出裁剪规则不兼容，单纯调整容器内边距、宽度参数无法抵消这个固定偏移。

修复代码 #

在文档YAML配置之后、业务代码之前添加自定义CSS，覆盖滑块默认偏移规则，强制控件宽度适配父容器即可。修复后完整代码如下：

---
title: "test"
output:
  flexdashboard::flex_dashboard
---

```{css, echo=FALSE}
/* 修复滑块溢出组件框问题 */
.irs {
  max-width: 100%;
  margin: 0 12px;
  box-sizing: border-box;
}
.irs .irs-min, .irs .irs-max {
  position: static !important;
  margin: 0 3px;
  display: inline-block;
}
.irs-with-grid .irs-grid {
  width: calc(100% - 16px);
  margin: 0 auto;
}
```

```{r setup, include=FALSE}
library(crosstalk)

dat <- data.frame(
  a = seq.Date(from = Sys.Date()-100, to = Sys.Date(), by = "days")
)

dat_shared <- SharedData$new(dat)
```

Column {data-width=800}
-------------------------------------
    
### Filtry
    
```{r}
filter_slider("date", "Date", dat_shared, ~a)
```

Column {data-width=400}
-------------------------------------

上述CSS样式将滑块两端的日期标签从绝对定位改为正常文档流布局，同时调整滑块轨道、刻度网格的宽度计算规则，可彻底解决滑块溢出问题，适配任意宽度的flexdashboard组件框。

内容的提问来源于stack exchange，提问作者Jakub.Novotny