CODEWITHSUNDEEP
rshinyshinydashboard
ixodid
ixodid

Reputation: 2400

Add caption to shinydashboard tabBox

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>") 
    })
  }
)

Upvotes: 0

Views: 311

Answers (2)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84529

With a flexbox:

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

shinyApp(
  ui = dashboardPage(
    dashboardHeader(disable = TRUE),
    dashboardSidebar(width = 0),
    
    body <- dashboardBody(
      div(
        style = "display: flex; flex-direction: column;",
        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>") 
    })
  }
)

Upvotes: 0

Ronak Shah
Ronak Shah

Reputation: 388907

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>") 
    })
  }
)

enter image description here

Upvotes: 1

Related Questions