Shiny R: Unwanted white space in fluidRow

Question

I am creating a shiny app by using a fluidRow/Column layout!

In the first row I would like to include an output containing one image plot! The second row contains further plots and reactive inputs (selectInput).

No matter what I try (renderPLot, renderImage, renderUI) to return the plot, I am always getting a white space below the first row which blows up the row -.-

Note that I source the plotting function for the plot in the first row. The plot itself looks perfectly fine, it's just the white space below the plot...

Any suggestions what could be the reason for this behaviour and how to get rid of the whitespace ?

Thanks !

Server.R

source("plotFunction.R")

shinyServer(function(input, output) {

   output$plot1 <- renderImage({

         outfile <- tempfile(fileext='.png')
         png(outfile, width=400, height=150)
         plotFunction(col_palette = heat.colors(4))
         dev.off()


         # Return a list containing the filename
         list(src = outfile,
                  contentType = 'image/png',
                  width = 400,
                  height = 150)

  }, deleteFile = TRUE)  # end of render image

}) # end of shinyServer  

UI.R

shinyUI(fluidPage(

   # 1st row
  fluidRow(
             column(   12, 
                       align = "center",
                       imageOutput("plot1")
              ) # end of column
), # end of 1st row 


# 2nd row
fluidRow(   
          column(   1,
                    selectInput("someSelection", 
                    label = "Select smth",
                    choices = c("smth","smth more") ),

                    selectInput("anotherSelection", 
                    label = "Select more",
                    choices = c("more","and more") )

            ) # end of column 


  ) # end of fluidRow

)) # end of shiny UI

plotFunction.R

 plotFunction <- function(col_palette) {

 mtrx = matrix(c(1,2,3,4),nrow = 4, ncol =3 ,byrow = T)

 par(oma = c(0,0,0,0),mar=c(2,2,0,2))  

 image(
        mtrx,  
        col = col_palette,
        xlab="",
        ylab = "",
        axes = F
   )
} # ned of plotFunction.R

HTML Code

Answer 1

For whatever reason, the height of the div in which your image is being placed isn't resizing as the image is resized to 400x150.

We can do a kind of hacky fix for this by using the HTML function to put the image in a div with some in-line CSS that fixes the height at 150px (or whatever else you would like).

library(shiny)

plotFunction <- function(col_palette) {
  mtrx = matrix(c(1,2,3,4),nrow = 4, ncol =3 ,byrow = T)
  par(oma = c(0,0,0,0),mar=c(2,2,0,2))  
  image(
    mtrx,  
    col = col_palette,
    xlab="",
    ylab = "",
    axes = F
  )
} # ned of plotFunction.R

server <- shinyServer(function(input, output) {
  output$plot1 <- renderPlot({
    plotFunction(col_palette = heat.colors(4))
  }, width = 400, height = 150)  # end of renderPlot
}) # end of shinyServer  

ui <- shinyUI(
  fluidPage(
    # 1st row
    fluidRow(   
      column(12,
        HTML("<div style='height: 150px;'>"),
        plotOutput("plot1"),
        HTML("</div>")
      )
    ),
    # 2nd row
    fluidRow(   
      column(1,
        selectInput("someSelection", 
          label = "Select smth",
          choices = c("smth","smth more")
        ),
        selectInput("anotherSelection", 
          label = "Select more",
          choices = c("more","and more")
        )
      ) # end of column 
    ) # end of fluidRow
  ) # end of fluidPage
) # end of shiny UI

shinyApp(ui = ui, server = server)