Position title in the header in shinydashboard-CodePudding

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

CodePudding user response：

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)

CodePudding user response：

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