13

How do I add text to the right of a dashboard header sidebar icon? It seems that previous similar solutions no longer work under updates to dashboardHeader().

This is what I am trying to do in a basic shinydashboard setting:

Example of desired text location in shinydashboard

I can use the strategy from this answer to get text in the header, but it's right-justified (which I can likely fix custom css) and also feels pretty hacky.

library(shiny)
library(shinydashboard) 
ui <- dashboardPage(dashboardHeader(title = "demo",
  tags$li(class = "dropdown",
    tags$p("foo")
  )
), dashboardSidebar(), dashboardBody()) 
server <- function(input, output) { } 
shinyApp(ui, server)

Is there a better way to do this?

mikeck
  • 3,534
  • 1
  • 26
  • 39

4 Answers4

13

The dashboardHeader is expecting elements of type dropdownMenu. So it will be hard to find a not hacky solution. The possible (hacky) options are: a) Modify the dashboardHeader function, or b) use some JavaScript code to add the text after creating the header. Below is my attempt to solve your problem using JavaScript, maybe it could help you. 

library(shiny)
library(shinydashboard) 
ui <- dashboardPage(
  dashboardHeader(
    title = "demo"
  ), 
  dashboardSidebar(), 
  dashboardBody(
    tags$head(tags$style(HTML(
      '.myClass { 
        font-size: 20px;
        line-height: 50px;
        text-align: left;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 0 15px;
        overflow: hidden;
        color: white;
      }
    '))),
     tags$script(HTML('
      $(document).ready(function() {
        $("header").find("nav").append(\'<span class="myClass"> Text Here </span>\');
      })
     '))
  )
) 
server <- function(input, output) { } 
shinyApp(ui, server)
Geovany
  • 5,389
  • 21
  • 37
  • A useful solution. I'm not sure which feels more hacky: faking a dropdown menu object or using javascript to inject a new class into the navbar. – mikeck Jul 19 '17 at 17:00
6

Adding to Geovany & Tiffany's answers, if you'd like the text content to be dynamic, you can have it change based on user input with the shinyjs::html function.

For example, I'm using it to display the name of the selected tab in the header. You can access the selected tab name in the server function as long as you have given the sidebar menu an id, in my case this is tabs.

I also had to add an id to the div that is appended to the header in Geovany's code, in this case pageHeader.

Then adding this to the server function will change the header text to display the selected tab, with switch being used to create a more presentable header format. Note the useShinyJs() in dashboardPage parameters:

library(shiny)
library(shinydashboard) 

ui <- dashboardPage(
        dashboardHeader(
          title = "demo"
        ), 
        dashboardSidebar(), 
        dashboardBody(
          tags$head(tags$style(HTML(
            '.myClass { 
            font-size: 20px;
            line-height: 50px;
            text-align: left;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            padding: 0 15px;
            overflow: hidden;
            color: white;
            }
            '))),
          tags$script(HTML('
                           $(document).ready(function() {
                           $("header").find("nav").append(\'<div id="pageHeader" class="myClass"></div>\');
                           })
                           '))
                           ),
        useShinyjs()
)

server <- function(input, output) {
  observeEvent(input$tabs, {
    header <- switch(input$tabs,
                     tab1 = "Tab 1",
                     tab2 = "Tab 2",
                     tab3 = "Tab 3")

    # you can use any other dynamic content you like
    shinyjs::html("pageHeader", header)
  })
} 

shinyApp(ui, server)
7hibault
  • 2,371
  • 3
  • 23
  • 33
Paul Campbell
  • 846
  • 7
  • 9
2

A slightly modified version of Geovany's code to customize font auto-sizing, placement etc. would be:

ui.R file in directory1 containing:

    library(shiny)
    library(shinydashboard) 
    ui <- dashboardPage(
      dashboardHeader(
        title = "demo"
      ), 
      dashboardSidebar(), 
        dashboardBody( 
                    tags$script(HTML('
                                            $(document).ready(function() {
                                            $("header").find("nav").append(\'<div class="myClass"> Text Here </div>\');
                                            })
                                            ')),
                    tags$head(
   # Include our custom CSS
                                        includeCSS("styles.css"),
                                )
          )
    )

server.R file in directory1 containing:

    library(shiny)
    library(shinydashboard) 
    server <- function(input, output) { }

a css style sheet (style.css in directory1) that controls the text parameters on resizing windows with a defined maximum size and unlimited shrink with the following code:

.myClass { 
line-height: 50px;
text-align: center;
font-family: "Arial";
padding: 0 15px;
color: black;
font-size: 2vw;
    }
@media (min-width: 1200px) {
  .myClass {
    line-height: 50px;
    text-align: center;
    font-family: "Arial";
    padding: 0 15px;
    color: black;
    font-size: x-large
  }
}

run using: 

shiny::runApp("path to directory1")
Tiffany
  • 561
  • 4
  • 11
1

Adding the padding properties can be a possible fix. Other options such as width, border and margin can be explored based on your requirements.

library(shiny)
library(shinydashboard) 
ui <- dashboardPage(dashboardHeader(title = "demo",
                                    tags$li(class = "dropdown", 
                                            style = "padding: 10px 1200px 0px 0px;",
                                            tags$p("foo")
                                    )
), dashboardSidebar(), dashboardBody()) 
server <- function(input, output) { } 
shinyApp(ui, server)

Hope this helps!

pradeepvaranasi
  • 151
  • 13