DT scroll bar not working in FlexDashboard

[maxmoro]

test2.txt

I noticed a few old issues about this topic, and I would repropose the issue again as it 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 as TXT):

`--- title: "Untitled" output: flexdashboard::flex_dashboard: orientation: row vertical_layout: scroll runtime: shiny

library(flexdashboard)

Column Sidebar {.sidebar}

Column {data-width=650}

Chart A

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

Chart C

`

[jjallaire]

@rstudio/connect Could you take a look to see what might be going on here?

[aronatkins]

@jjallaire I'm seeing the same behavior in the IDE, Connect (embedded in iframe) and Connect (stand-alone). In all three cases, there is no DT scrollbar and the entire page scrolls left-to-right.

If I remove the following configuration from the YAML block:

    vertical_layout: scroll

I get scrolling constrained to the table in all three environments.

[jonyoder]

In Connect v. 1.4.6, we included some CSS fixes to support touch scrolling on mobile devices. Although I consider it unlikely, it's possible that the 1.4.6 scrolling fixes may have improved Connect's behavior to make Connect (embedded in iframe) consistent with the IDE and Connect (stand-alone).

[tarunparmar]

I just left a comment on issue 109.

scrollX and scrollY dont take boolean values.

[Kvit]

I found the following solution: Dashboard settings (YAML):

---
output:
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

DT options:

# set common data table options
options(DT.options = list(scrollY="100vh"))

This way DT fills full container in Dashboard but starts vertical scroll if goes beyond 100%(v)iew(h)eight of container

[Kvit]

Additional info on my previous comment: looks like DT has its own layout logic and so does Flexdashboard. Those logics don't always agree and you have to decide which logic should take precedence. If you want to handle sizing via DT layout options it is better not to use vertical_layout: fill in Flexdashboard and let container be its "natural" size (which is controlled by content). Although problem comes up if you want other columns to be "filled".

[maxmoro]

I added a comment on a similar tread. I can't make it work with layout=scroll. Here a working example You'll see no scroll bars on Rstudio rendering, but if you use the browser, the scroll bars are for the full page. If you scroll RIGHT the DT is overlapping with the Sidebar.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: scroll
runtime: shiny
---

library(flexdashboard)
library(DT)
library(ggplot2)
options(DT.options = list(scrollY="100vh"))

Inputs {.sidebar}
==============================

Here

we

have

inputs

Body
==============================

Column  
-----------------------------------------------------------------------
### Chart A
```{r}
DT::dataTableOutput('DTtest')

output$DTtest <- DT::renderDataTable(DT::datatable(diamonds[1:1000,] 
                               ,options = list(list(scrollY="300px"
                                                 , scrollX="300px"
                                                 , pageLength = 100
                                                 ))
                               ,  filter = 'top')
)

[nwstephens]

I'm getting similar behavior on this dashboard, but just on the header (not the body). I get the behavior after I scroll down and then move to the left. If I don't scroll down still move to the left, I do not get this behavior.

[maxmoro]

Thank you for the comment, Did you try to run my code, is it causing same behavior? Someone from RStudio can help us to check if this is a bug in flexdashboard? Thanks

[nwstephens]

You can see my issue by repeating the following steps:

1. Open http://colorado.rstudio.com:3939/tracker-dash/
2. Resize your browser window to be narrow
3. Scroll to the bottom of the table then scroll right

I don't use any special features in my YAML header:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
runtime: shiny
---

Like @aronatkins I get this behavior in the IDE, RSC, and in Firefox/Chrome. But I can only reproduce this issue if I use the shiny runtime. Perhaps @jcheng5 can take a look to see if this is Shiny related.

[MLud]

I see that problem was resolved on PC browser, but I have the same on mobile when I using rendering to html by rmarkdown::render Any ideas?

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

library(flexdashboard)
library(kableExtra)
library(titanic)
library(DT)

#one

knitr::kable(head(titanic_train))

#two

head(titanic_train) %>% 
  kable() %>% 
  kable_styling()

#three

head(titanic_train) %>% 
  datatable() 

[pernaletec]

Hi all!

I understand that this is an old thread. However, for someone that could be currently facing the same problem (like me until five minutes ago!) I could solved my problem using the answer described by @jcheng5 in this link: https://groups.google.com/forum/#!topic/shiny-discuss/N5N0PqcBvuY

In short the problem is solved by adding the following lines of code to your styles.css file.

.chart-wrapper { overflow-x: scroll; }

Regards!

[gadenbuie]

Likely a duplicate of or related to #84