Shinydashboard: height issue even using fluidRow

Question

I need to make a very professional Shinyapp, but the end of the body of the app ends in the middle of the last plot.

I found this other question, but it's solution (use fluidRow) doesn't work in my case:

https://stackoverflow.com/questions/46259208/shiny-dashboard-mainpanel-height-issue

What could be wrong?

All data is reproducible.

## app.R ##
library(shiny)
library(shinydashboard)
library(dygraphs)
library(plotly)
library(readr)


ui <- dashboardPage(
  dashboardHeader(title = "Monitoramento Banco de Dados"),         
  dashboardSidebar(
    sliderInput("DateInput", "Periodo", -30, 0, c(-15, 0), pre = "D.")
  ),
  dashboardBody(

    fluidRow(
      dygraphOutput("plot1"),
      br(),
      plotlyOutput("plot")
    )
  )
)

server <- function(input, output) {



  output$plot1 <- renderDygraph({
    lungDeaths <- cbind(ldeaths, mdeaths, fdeaths)
    dyRangeSelector(dygraph(lungDeaths, main = "Deaths from Lung Disease (UK)"), dateWindow = c("1974-01-01", "1980-01-01"))
  }) 


  sesiones_por_fuente <- reactive({


#sesiones_ga <- read_csv("www/ga-sesiones-lc-20180824.csv", skip = 0)
sesiones_ga <- read_csv("https://www.dropbox.com/s/w2ggnb0p4mz2nus/sesiones-2018.csv?dl=1", skip = 0)

    sesiones_ga <- sesiones_ga %>%
      group_by(date, sources) %>%
      summarise(sessions = sum(sessions)) %>%
      filter(sources != "spam")


  })



  m <- list(
    l = 120,
    r = 120,
    b = 100,
    t = 100,
    pad = 20
  )

  output$plot <- renderPlotly({

plot_ly(sesiones_por_fuente(), x = ~sessions, y = ~sources, type = 'bar',
        width = 1200, height = 500, orientation = 'h') %>%
  layout(title = "Sesiones por mes",
         xaxis = list(title = ""),
         yaxis = list(title = ""),
         margin = m) %>%
  layout(hovermode = 'compare',
         separators = ',')




})

}

shinyApp(ui, server)

Answer 1

So I had to inspect the HTML produced by Shiny. And its results that the plotly graphs are rendered in a div (produced by the server.R file) an this div is inside another div (produced by ui.R).

So, if the inner div, produced by the sever.R file, is bigger than the div produced by the ui.R file that produces that layout error.

So, if you have this in the server.R (notice the height argument of 500px in the plot_ly fun()):

  output$plot <- renderPlotly({


sesiones_fuente <- sesiones_por_fuente() %>%
  filter(date > input$dateRange[1], date < input$dateRange[2]) %>%
  group_by(sources) %>%
  summarise(sessions = sum(sessions))

plot_ly(sesiones_fuente, x = ~sessions, y = ~sources, type = 'bar',
        width = 1200, height = 500, orientation = 'h') %>% 
      layout(title = "Sesiones por mes",
             xaxis = list(title = ""),
             yaxis = list(title = ""),
            margin = m) 


})

You need to used the argument height=500px in plotlyOutput or a Fluidrow of the same height in ui.R:

plotlyOutput of height 500px:

fluidRow(
            column(12, offset = 1,
                   plotlyOutput("plot_sesiones_por_mes", height = "500px"))),
            br(),

fluidRow of height 500px:

fluidRow(style = "height:500px",
            column(12, offset = 1,
                   plotlyOutput("plot_sesiones_por_mes"))),
            br(),