R flexdashboard crosstalk date filter_slider does not fit in the box

Question

I am having trouble using flexdashboard with crosstalk's filter_slider with dates. It does not seem to fit well in the box in the flexdashboard dashboard (see the image below). Increasing the size of the box does not help as the filter just gets bigger.

Is there a way to make the filter fit in the box? I assume that adding css specifying padding might help, but I can't make it work.

Here is how to reproduce my example:

---
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}
-------------------------------------

Answer 1

Following is a jQuery function that fires every second. For the left side of the filter, it checks if the date from value (css property .irs-from) is equal to the min value (.irs-min). If so, it changes the css property to 0% (originally under 0). This way the slider fits on the screen. The if clause is important because if one uses the filter, the box moves to the position of the selection. In that case you probably want it to stay there, not to move to the beginning. For the right side, it is very similar, but with .irs-from and .irs-max.

var fitTheScreen = window.setInterval(function(){
  if ( $(".irs-from").text() === $(".irs-min").text() ) {
    $(".irs-from").css({"left": "0%"});
  }

  if ( $(".irs-to").text() === $(".irs-max").text() ) {
    $(".irs-to").css({"left": "86%"});
  }

}, 1000);

This is what the result looks like:

Runnable example here:

---
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)

```

```{js, echo=FALSE}

var fitTheScreen = window.setInterval(function(){
  if ( $(".irs-from").text() === $(".irs-min").text() ) {
    $(".irs-from").css({"left": "0%"});
  }

  if ( $(".irs-to").text() === $(".irs-max").text() ) {
    $(".irs-to").css({"left": "86%"});
  }

}, 1000);

```
    
Column {.sidebar data-width=400}
-------------------------------------
    
### Filtry
    
```{r}

filter_slider("date", "Date", dat_shared, ~a)

```


   
Column {data-width=800}
-------------------------------------