Broken Shiny table formatting when viewed in flexdashboard

[jtesta-deuce]

I have a simple table that is rendered correctly as a Shiny app, but becomes broken when embedded into flexdashboard.

Here is what it looks like as a native Shiny app:

But this happens when its embedded into flexdashboard:

This bug is easy to reproduce. The following native Shiny app code is put into bug_test.R:

library(DT)
library(shiny)

ui_test <- fluidPage(
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      DT::dataTableOutput("table"),
    )
  )
)

server_test <- function(input, output) {

  output$table <- DT::renderDataTable(DT::datatable({
    colA <- c("A", "B", "C")
    colB <- c("X", "Y", "Z")
    colC <- c("1", "2", "3")
    return(data.frame(colA, colB, colC))
  }), options = list(
    dom = "t",
    ordering = FALSE,
    autoWidth = TRUE,
    columnDefs = list(
      list(className = "dt-right", targets = 1),
      list(width = "150px", targets = 0),
      list(width = "200px", targets = 1),
      list(width = "100px", targets = 2)
    )
  ), selection = "none", rownames = FALSE, escape = FALSE)

}

shinyApp(ui = ui_test, server = server_test)

The flexdashboard code (test.Rmd) is:

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
runtime: shiny
---
Tab Name
=======================================================================

```{r}
source("bug_test.R")

shinyApp(ui = ui_test, server = server_test)

I am using the latest version of RStudio (2024.04.2, Build 764), and the latest versions of all modules (Shiny 1.8.1.1, DT 0.33, flexdashboard 0.6.2).

[rempsyc]

Ah! I've been looking for a solution to this bug for days! The same happens with figures. I've opened a StackOverFlow issue about this here: https://stackoverflow.com/q/78963141/9370662. This happens regardless of how big I make the first row, even ridiculously big, there's always lots of unused space for the row, but somehow the table or figure still is contained within a small container with a scroll bar. I'm very puzzled by this and cannot find a solution. Did you find one?

Edit: Also I'd like to clarify that this bug only arises when using vertical_layout: scroll

[rempsyc]

Seems related to #117

[rempsyc]

Here's an even simpler minimally reproducible example:

---
title: "Minimal Flexdashboard Example"
output:
  flexdashboard::flex_dashboard:
    orientation: rows   
    vertical_layout: scroll
runtime: shiny
---

## Row 1 {data-height=800}

```{r}
ui <- fluidPage(
  plotOutput("plot", height = "500px")
)
server <- function(input, output, session) {
  output$plot <- renderPlot(plot(1:5))
}
shinyApp(ui, server)

![image](https://github.com/user-attachments/assets/5561ff83-5e0f-42f8-ad26-751d02bcece5)

[fraupflaume]

This addition to the example provided by rempsyc was something I addressed in their Stack Overflow question with the addition of the following CSS.

<style>
div.desktop-layout * iframe.shiny-frame {
  height: 100%;
  width: 100%;
}
div.mobile-layout * iframe.shiny-frame {
  height: 500px;
}
</style>

[gadenbuie]

```{r}
ui <- fluidPage(
  plotOutput("plot", height = "500px")
)
server <- function(input, output, session) {
  output$plot <- renderPlot(plot(1:5))
}
shinyApp(ui, server)

flexdashboard is definitely not expecting you to use shinyApp() within the dashboard, unless (I guess) you're trying to include a fully separate Shiny app from your dashboard document. I think this happens to work due to magic in rmarkdown, but note that the app in the chunk above will (or should be) entirely isolated from any shiny logic in the dashboard.

The Using shiny with flexdashboard article gives more background and information about how flexdashboard and shiny are expected to work together.