How to correctly identify and style the html class of a shiny output object?

Question

Many times I had to go through painful trial and error sessions to style outputs from a shiny app. Most times I manage (either by myself or because someone else had a similar issue). But sometimes it doesn't seem to make sense. (I'm an R programmer, not a web designer, so apologies for little css knowledge).

Let's take the example of renderImage.

I have a jpeg which has an aspect ratio of 2x1 (width twice of height), and I want to display it in a modalWindow (maintaining the aspect ratio. So I have to following app with a sample jpeg: (You can get the image from https://picsum.photos/id/237/200/100

library(shiny)
shinyApp(
  ui = fluidPage(
    actionButton("goButton", "Go!"),
  ),
  server = function(input, output, session) {
    observeEvent(input$goButton, {
          showModal(modalDialog(
            output$image <- renderImage({
              list(
                src = "/path_to_file/237-200x100.jpg",
                filetype = "image/jpeg",
                width="100%", height = "auto",
                alt = "image"
              )
            }),
            "some text which should come right below the image"
    ))})})

So what happens is that the image maintains its aspect ratio, but the underlying box shrinks/expands, creating a gap between the image and the next element. This, from inspection in the browser, is determined by class "shiny-image-output" and "shiny-bound-output".

According to the documentation of renderImage: "The corresponding HTML output tag should be div or img and have the CSS class name shiny-image-output."

If I add:

       tags$head(
         tags$style(".shiny-bound-output {height: auto; width: 100%; background-color: coral}")),

or:

    tags$style(".shiny-image-output {height: auto; width: 100%; background-color: coral}"),

The result if the following:

So, I'm able to change the background color of the box, but not its size.

I found that width:100% and height:400px is the default for imageOutput. But because I'm rendering the image from a modalWindow, I cannot directly change this.

So, what am I doing wrong? Thank you

Answer 1

So, thanks to @Limey, I got a working solution using renderUI.

library(shiny)
shinyApp(
  ui = fluidPage(
    actionButton("goButton", "Go!"),
      ),
  server = function(input, output, session) {
    output$image <- renderImage({
      list(
        src = "/home/antonio/Desktop/237-200x100.jpg",
        filetype = "image/jpeg",
        width="100%",
        height = "auto",
        alt = "image",
        class="myImageClass"
      )
    })
    output$imageUI <- renderUI({
      imageOutput("image", height = imgSize()$height)})

    observeEvent(input$goButton, {
          showModal(modalDialog(
            renderUI({imageOutput("image", height = "auto", width = "100%")}),
            "some text"
          ))
    })
  }
)