Add caption to shinydashboard tabBox

Question

I wish to add a line of HTML text just below a shinydashboard tabBox. The script below adds the text at what looks like the top of the next column.

How do I add a line of HTML text directly below the tabBox. It would be similar to a caption.

library("shiny")
library("shinydashboard")

shinyApp(
  ui = dashboardPage(
    dashboardHeader(disable = TRUE),
    dashboardSidebar(width = 0),

    body <- dashboardBody(
      fluidRow(
        tabBox(
          id = "tabset1", height = "250px",
          tabPanel("Tab1", "First tab content"),
          tabPanel("Tab2", "Tab content 2")
        ),
        htmlOutput("last_updated")
      )
    )
  ),
  server = function(input, output) {
    # The currently selected tab from the first box
    output$tabset1Selected <- renderText({
      input$tabset1
    })
    
    output$last_updated <- renderText({
      paste("<font size='1px;'>Place this caption beneath the tab box</font>") 
    })
  }
)

Ronak Shah Ronak Shah · Accepted Answer · 2021-01-16T03:48:06

One option would be to create a new fluidRow.

library(shiny)
library(shinydashboard)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(disable = TRUE),
    dashboardSidebar(width = 0),
    
    body <- dashboardBody(
      fluidRow(
        tabBox(
          id = "tabset1", height = "250px",
          tabPanel("Tab1", "First tab content"),
          tabPanel("Tab2", "Tab content 2")
        ),
      ),
      fluidRow(htmlOutput("last_updated"))
    )
  ),
  server = function(input, output) {
    # The currently selected tab from the first box
    output$tabset1Selected <- renderText({
      input$tabset1
    })
    
    output$last_updated <- renderText({
      paste("<font size='1px;'>&ensp;&ensp;&ensp;Place this caption beneath the tab box</font></p>") 
    })
  }
)

Add caption to shinydashboard tabBox

2 Answers