Search code examples
rshinyshinydashboard

Make image fill height of column within tabpanel shinydashboard

I have a tabPanel where I want a figure to fill the whole height of the panel (the figure is tall but narrow). To the left of the figure I have some text, and I want the figure to align to the right side of the tabPanel. However, with the code below, I cannot seem to be able to get the figure to fill the whole length of the panel, and it is not auto-adjusting to the screen size correctly. What is the correct way of doing this?

ui <- shinydashboard::dashboardPage(
  shinydashboard::dashboardHeader(title = "title"),
  shinydashboard::dashboardSidebar(),
  shinydashboard::dashboardBody(
    shinydashboard::tabBox(
      title = "title",
      shiny::tabPanel(
        "test panel",
        column(
          width = 8,
          HTML(
          "Some text goes here with bullet points.
          <ul>
          <li>
          <b>Point one:</b> Lorem ipsum.
          </li>
          </ul>")
        ),
        column(
          width = 2,
          img(
            src ='testfig.png',
            style = 'width: 100%;'
          )
        )
      )
    )
  )
)

server <- function(input, output, session) {
}

shiny::shinyApp(ui, server)

The code above generates this:

enter image description here

While this is what I want it to look:

enter image description here

Solution

  • column()'s should be wrapped in fluidRow():

    library(shiny)
library(shinydashboard)

ui <- shinydashboard::dashboardPage(
  shinydashboard::dashboardHeader(title = "title"),
  shinydashboard::dashboardSidebar(),
  shinydashboard::dashboardBody(
    tagAppendAttributes(shinydashboard::tabBox(
      title = "title",
      shiny::tabPanel("test panel",
                      fluidRow(
                        column(width = 10,
                               withTags(
                                 div("Some text goes here with bullet points.",
                                     ul(li(
                                       b("Point one:"), " Lorem ipsum."
                                     )))
                               )),
                        column(
                          width = 2,
                          img(src = 'https://www.r-project.org/logo/Rlogo.svg',
                              style = 'width: 10vw; height: 84vh; float:right;')
                        )
                      )), width = 12
    ), style = "padding:0px;"))
)

server <- function(input, output, session) {
  
}

shiny::shinyApp(ui, server)