1

I'm using a modal to open a new shinyApp. I know this probably isn't good practice but I'm just using it to demo a prototype / idea I have - it doesn't need to be stable / optimized.

The problem I am having is when my modal pops up the dashboard within seems to have a vertical limit and no matter what I try I can't get the dashboard to stretch past a certain point.

In the image below you can see there is white space and a vertical scroll which isn't needed. I want to remove the vertical scroll and have the dashboard use the white space below:

Modal with whitespace

Code attached:

library(shiny)
library(ggplot2)
library(gridExtra)

#main UI
ui <- fluidPage(
  
 actionButton("show", "Show modal dialog"),
 tags$style(".modal-dialog{ width:1500px}"),
 tags$style(".modal-body{ min-height:700px}") #expand vertically but dashboard doesn't occupy
 
)

#main server
server = function(input, output) {
  observeEvent(input$show, {
    showModal(modalDialog(
      shinyApp(modal_ui, modal_server)
    ))
  })
}

#UI for the modal
modal_ui <- pageWithSidebar(
  headerPanel('Distribution of Length and Width of Petal and Sepal based on Species'),
  sidebarPanel(
    selectInput('Species', 'Select Species', as.character(unique(iris$Species)))
  ),
  mainPanel(
    
    plotOutput('plot1')
  )
)

#server for the modal
modal_server = function(input, output) {
    
    data <- reactive({iris[iris$Species == input$Species,]})
    
    output$plot1 <- renderPlot({
      
      #Plot 1: Distribution of Sepal Length 
      g1 <- ggplot(data(), aes(Sepal.Length))
      g1 <- g1 + geom_histogram(binwidth = .5, fill="green", color = "black",alpha = .2)
      g1 <- g1 + geom_vline( aes(xintercept = mean(data()$Sepal.Length)), colour="red", size=2, alpha=.6)
      g1 <- g1 + labs(x = "Sepal Length")
      g1 <- g1 + labs(y = "Frequency")
      g1 <- g1 + labs(title = paste("Distribution of  Sepal Length, mu =", round(mean(data()$Sepal.Length),2)))
      
      #Plot 2: Disbribution of Sepal Width
      g2 <- ggplot(data(), aes(Sepal.Width))
      g2 <- g2 + geom_histogram(binwidth = .5, fill="green", color = "black",alpha = .2)
      g2 <- g2 + geom_vline( aes(xintercept = mean(data()$Sepal.Width)), colour="red", size=2, alpha=.6)
      g2 <- g2 + labs(x = "Sepal Width")
      g2 <- g2 + labs(y = "Frequency")
      g2 <- g2 + labs(title = paste("Distribution of Sepal Width, mu =", round(mean(data()$Sepal.Width),2)))
      
      #Plot 3: Disbribution of Petal Length
      g3 <- ggplot(data(), aes(Petal.Length))
      g3 <- g3 + geom_histogram(binwidth = .5, fill="yellow", color = "black",alpha = .2)
      g3 <- g3 + geom_vline( aes(xintercept = mean(data()$Petal.Length)), colour="red", size=2, alpha=.6)
      g3 <- g3 + labs(x = "Petal Length")
      g3 <- g3 + labs(y = "Frequency")
      g3 <- g3 + labs(title = paste("Distribution of  Petal Length, mu =", round(mean(data()$Petal.Length),2)))
      
      #Plot 4: Disbribution of Petal Width
      g4 <- ggplot(data(), aes(Petal.Width))
      g4 <- g4 + geom_histogram(binwidth = .5, fill="yellow", color = "black",alpha = .2)
      g4 <- g4 + geom_vline( aes(xintercept = mean(data()$Petal.Width)), colour="red", size=2, alpha=.6)
      g4 <- g4 + labs(x = "Petal Width")
      g4 <- g4 + labs(y = "Frequency")
      g4 <- g4 + labs(title = paste("Distribution of Petal Width, mu =", round(mean(data()$Petal.Width),2)))
      
      #Plotting 4 graphs
      grid.arrange(g1,g2,g3,g4,nrow=2, ncol=2)
    })
  }


shinyApp(ui, server)

Any help to overcome this issue would be greatly appreciated.

vDan
  • 11
  • 2

1 Answers1

0

If you inspect the generated html code of your app, you'll see that there is an iframe with a css class .shiny-frame created inside the modalDialog, with a fixed height="400".

You can adjust the height of this iframe with the following css code:

tags$style(
  ".shiny-frame{height:700px;}"
  )
julien.leroux5
  • 969
  • 7
  • 17