CODEWITHSUNDEEP
rshinyshinydashboard
mikeck
mikeck

Reputation: 3776

Add text on right of shinydashboard header

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?

Upvotes: 16

Views: 15381

Answers (5)

Emile Z&#228;kiev
Emile Z&#228;kiev

Reputation: 176

The answer of Paul generated no tabs for me, here is the code that does:

library(shinyjs)
library(shiny)
library(shinydashboard) 

ui <- dashboardPage(
  dashboardHeader(
    title = "demo"
  ), 
  dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Tab 1", tabName = "tab1"),
      menuItem("Tab 2", tabName = "tab2"),
      menuItem("Tab 3", tabName = "tab3")
    )
  ), 
  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, session) {
  observeEvent(input$tabs, {
    header <- switch(input$tabs,
                     tab1 = "Tab 1",
                     tab2 = "Tab 2",
                     tab3 = "Tab 3")
    shinyjs::html("pageHeader", header)
  })
  
  observeEvent(input$tabs, {
    updateTabItems(session, "tabs", input$tabs)
  })
} 

shinyApp(ui, server)

Upvotes: 1

pradeepvaranasi
pradeepvaranasi

Reputation: 171

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!

Upvotes: 1

Paul Campbell
Paul Campbell

Reputation: 876

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)

Upvotes: 7

Tiffany
Tiffany

Reputation: 571

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

Upvotes: 2

Geovany
Geovany

Reputation: 5677

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)

Upvotes: 16

Related Questions