CODEWITHSUNDEEP
htmlrshinyshinydashboardbs4dash
TarJae
TarJae

Reputation: 78917

Position title in the header in shinydashboard

Having this basic shiny app: I would like to position my title in the header like indicated in red in the image below:

There are already some solutions Add text on right of shinydashboard header but I am wondering if there is a more "straight" way?

The solution by @matrixloading is appealing but not satisfactory because of the dot in front of the text:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),
      
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

enter image description here

Upvotes: 3

Views: 609

Answers (2)

jpdugo17
jpdugo17

Reputation: 7106

We can append a child element inside de nav element of the dashboardHeader.

dashboardHeader(title = "Basic dashboard") |>
    tagAppendChild(
      div(
        "This is My Title",
        style = "
      display: block;
      font-size: 1.5em;
      margin-block-start: 0.5em;
      font-weight: bold;
      color: darkred;
      margin-right: 50%",
        align = "right"
      ),
      .cssSelector = "nav"
    )

enter image description here

Upvotes: 5

Talha Asif
Talha Asif

Reputation: 401

The CSS text-align property can be used to centre the title. I have used the title argument of the titlePanel function to adjust the code.

Here is the code for the adjustment:

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    titlePanel(title = tags$h2(
      tags$b("Title for the Basic Dashboard"),
      tags$style(HTML("h2 { text-align: center; }"))
    )
    ),
    fluidRow(
      box(plotOutput("plot1", height = 250)),
      
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

Upvotes: 2

Related Questions