How can I size a dygraph widget properly within a flexdashboard tabset layout in shiny?

Question

In R, I'm creating a shiny app with a flexdashboard layout that uses tabs. I want to include a dygraph in one of the tabs but the chart goes out of the container. I tried changing the width and the height both in the dygraph and in the output but none of them seem to work.

Minimum working example:

---
title: "Example"
output: 
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---

```{r global, include=FALSE}
library(dygraphs)
data=data.frame(x=1:10,y=11:20,val=21:30)

ymin=min(data$y,na.rm=TRUE)
ymax=max(data$y,na.rm=TRUE)

```

TABS {.tabset}
-----------------------------------------------------------------------

### Tab1



```{r singleSlider }
sliderInput("sliceval", "Observation:",
            min = ymin, max = ymax,step=1,
            value = 11,width="90%")



```

```{r dygraph}

# Tried also changing height width to px
output$sliceGraph <- renderDygraph({
  dygraph(data[input$sliceval>=data$y,c("x","val")],height="50%",width="80%")
})

# Tried also changing height width to %
dygraphOutput("sliceGraph",height='100px',width='100px')


```

### Tab 2 

Some stuff here

Is there a way to fit the dygraph properly in such a layout?

Answer 1

I'd take a look at the documentation for using flexdashboard again and use their recommended fillCol or fillRow to exercise more control. Specifically, try this layout:

```{r singleSlider, echo=FALSE}
fillCol(height = 600, flex = c(NA, 1),
  sliderInput("sliceval", "Observation:",
            min = ymin, max = ymax,step=1,
            value = 11,width="90%"),
  # Tried also changing height width to %
  dygraphOutput("sliceGraph",height='400px',width='100%')
)


# Tried also changing height width to px
output$sliceGraph <- renderDygraph({
  dygraph(data[input$sliceval>=data$y,c("x","val")],height="50%",width="80%")
})
```