Search code examples
rshinyshinydashboard

How can I remove extra gray spacing in a Shiny app


Based on the code below which basically shows a HTML file in a Shiny app, how can I remove the extra gray space above and below the infographic?

library(shiny)
library(shinydashboard)

ui = fluidPage(
  navbarPage(htmlOutput("infographic"),
  )
)

server <- function(input,output){
  output$infographic <- renderUI({
    tags$iframe(seamless="seamless", 
                src= "Hub_Infographic.html",
                width=1080, 
                height=1024)
  })
}



shinyApp(ui, server)

app output:

enter image description here

Desired output (shown by opening the HTML file in the browser):

enter image description here


Solution

  • You can use the viewport height and width, to make it even a nicer fit, consider defining the horizontal height of your navbar as well in vh, then substract that height from the iframe height. You then have a perfect fullscreen navbar+iframe

    tags$iframe(seamless = "seamless", src= "Hub_Infographic.html", style = "width:100vw;height:100vh;")