How to render an image in shiny box and fix the width and height? R

Question

I have this shiny app I am making. My goal is to have a fluid row that has an image and some inputs

# Test Version with google logo

library(shinydashboard)
library(shiny)

ui <- dashboardPage(
  dashboardHeader(title = "Dashbaord"),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody(
    fluidRow(
      box(
        title = "Image Goes Here",
        img(src='https://cdn.vox-cdn.com/thumbor/ULiGDiA4_u4SaK-xexvmJVYUNY0=/0x0:640x427/1400x1050/filters:focal(0x0:640x427):format(jpeg)/cdn.vox-cdn.com/assets/3218223/google.jpg',
            align = "center",
            width = "100%",
            style="height: 50px")), #I'm trying to change the size here but it doesn't work
      box(align = "center",
        title = "Select Inputs",status = "warning", solidHeader = F,
        selectInput("dropdown1", "Select Drilldown:", c(50,100,200))
    )
        
    )
  )
)

server <- function(input, output) {
}
shinyApp(ui, server)

Technically this code works, but I don't like how the box with the image changes based off the monitor/view. I would like for both boxes to be the same height and remain uniformed. I posted some screen shots below.

Full Screen

Half Screen

Desire Output (row is the same height no matter what).

Edit:

box_height = "20em"
plot_height = "16em"

ui <- dashboardPage(
  dashboardHeader(title = "Box alignmnent test"),
  dashboardSidebar(),
  dashboardBody(
    # Put boxes in a row
    fluidRow(
      box(
        title = "Image Goes Here",
        img(src='https://cdn.vox-cdn.com/thumbor/ULiGDiA4_u4SaK-xexvmJVYUNY0=/0x0:640x427/1400x1050/filters:focal(0x0:640x427):format(jpeg)/cdn.vox-cdn.com/assets/3218223/google.jpg',
            align = "center",
            width = "100%"),
              height = box_height),
         
            
       box(plotOutput("speed_distbn",height = plot_height), height = box_height)
        )
      )
    )
  


server <- function(input, output) {

}
shinyApp(ui, server)

Boxes stay the same height but the image overlaps the box

Answer 1

How about this

library(shinydashboard)
library(shiny)

my_height = "30em"

ui <- dashboardPage(
    dashboardHeader(title = "Box alignmnent test"),
    dashboardSidebar(),
    dashboardBody(
        # Put boxes in a row
        fluidRow(
            box(
                title = "Image Goes Here",
                img(src='https://cdn.vox-cdn.com/thumbor/ULiGDiA4_u4SaK-xexvmJVYUNY0=/0x0:640x427/1400x1050/filters:focal(0x0:640x427):format(jpeg)/cdn.vox-cdn.com/assets/3218223/google.jpg',
                    align = "center", style = paste0("width: 100%; height: ", my_height, ";"))
            ),
            box(title = "Plot", plotOutput("speed_distbn", height = my_height))
        )
    )
)



server <- function(input, output) {
    output$speed_distbn <- renderPlot(plot(1))
}
shinyApp(ui, server)

In this case, you want to use other random tags on the right side. In order to have the right the same height as left, we can use spsComps::heightMatcher . We can use function to dynamically match the height of the right side to the left side.

library(shinydashboard)
library(shiny)

my_height = "30em"

ui <- dashboardPage(
    dashboardHeader(title = "Box alignmnent test"),
    dashboardSidebar(),
    dashboardBody(
        # Put boxes in a row
        fluidRow(
            box(
                title = "Image Goes Here",
                id= "box_l",
                img(src='https://cdn.vox-cdn.com/thumbor/ULiGDiA4_u4SaK-xexvmJVYUNY0=/0x0:640x427/1400x1050/filters:focal(0x0:640x427):format(jpeg)/cdn.vox-cdn.com/assets/3218223/google.jpg',
                    align = "center", style = paste0("width: 100%; height: ", my_height, ";"))
            ),
            box(
                title = "Select inputs", 
                id= "box_r",
                selectInput("dropdown1", "Select Drilldown:", c(50,100,200))
            ),
            spsComps::heightMatcher("box_r", "box_l")
        )
    )
)



server <- function(input, output) {
}
shinyApp(ui, server)

In your case, the height on left is fixed, but heightMatcher can do it even with dynamically changed height. try click on spsComps shiny demo and go to the Misc tab and see the dynamic heightMatcher demo.