DT scroll bar not working in FlexDashboard

[Max Moro]

I noticed few old issues about this topic not yet addressed, and I would submit it again as is pretty frustrating.

Basically when in CONNECT. The DT scroll bar is not working with Flexdashboard using shiny runtime and scroll vertical_layout.
The DT is not contained in the column, and consequently the scroll bar disappear.

It works perfectly with RSTUDIO, but doesn't when the report is published in CONNECT.

Is it a Flexdashboard or Connect issue?

Here a reproducible example (also attached):

---

title: "Untitled"

output: 

  flexdashboard::flex_dashboard:

    orientation: row

    vertical_layout: scroll

runtime: shiny

---

```{r setup, include=FALSE}

library(flexdashboard)

```

Column Sidebar {.sidebar}

-----------------------------------------------------------------------

Column {data-width=650}

-----------------------------------------------------------------------

### Chart A

```{r}

DT::renderDataTable(server=T,{

    #a very wide and tall  table

    data=mtcars

    data=cbind(data,data)

    data=cbind(data,data)

    data=rbind(data,data)

    data=rbind(data,data)

    dt= DT::datatable(data

                      ,extensions = c('FixedColumns')

                      ,escape=FALSE

                      ,rownames=FALSE

                      ,filter = list(position = 'top', clear = FALSE, plain=T)

                      ,options = list(

                          dom = 'ifrtlp'

                          ,fixedColumns=list(leftColumns =1)

                          ,searching=T

                          ,pageLength=10

                          ,scrollX=TRUE

                          ,autoWidth = T

                          ,deferRender=F

                          ,stateSave=TRUE

                      ))

    return(dt)

})

```

Column {data-width=350}

-----------------------------------------------------------------------

### Chart B

```{r}

```

### Chart C

```{r}

```

[Joe Cheng]

I'm not 100% sure why, but inserting this chunk seems to fix it for me:

```{css}

.chart-wrapper {

  overflow-x: scroll;

}

```

Can you see if this works for you, and whether it causes any other problems?

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/d46e2c08-e9c7-4cb4-b1db-5b81bc338ecb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Massimiliano Moro]

Thank you Joe, it works now!

but I added the css in the styles.css file and then included the 

css: styles.css YAML header in the markdown.

I like more using the chunks, where did you add it in the markdown? I tried to add at the beginning but didn't work (I got a strange error on the Connect)

Do you think this can be fixed in the next version of Connect? (just to avoid the chunk)

Max

[Joe Cheng]

Actually I didn't reproduce it with Connect, but on RStudio desktop. Is it possible it was just the fact that Connect takes up some of the horizontal width with its permissions bar? What happens if you resize and reload after resizing on the desktop, do you get the same problem? Just want to establish where the bug should be assigned.

The CSS chunk should work anywhere a normal chunk can be inserted. If it's not working for you maybe try upgrading your copy of rmarkdown, as CSS chunks were added less than a year ago.

[Massimiliano Moro]

Thank you for your great help!

I tried running the report as 'Solo', and I don't see the bar in the DT box, but I see an horizontal scroll bar for the entire page.. looks like the DT goes far to the right without limit. When I scroll to the right the Flexdashboard left side bar stays and it gets ugly :)

Also after refreshing the page I've same situation. 

About the css, I've the most recent version, I think the chunk is working with RStudio, but with Connect I get a very strange error (There is no packaged called flexdasboard).. I guess it is just caused but the Connect version, maybe the Connect team can check if the upcoming version has this solved

Here a snapshot with no DT bar, but the page horizontal bar.

Everything works with the .css you sent me (as styles.css)

Attached the code and styles.css