Add text to the right of the shinydashboard title
How do I add text to the right of the sidebar icon of the dashboard title? It looks like the previous similar solutions no longer work with updates to dashboardHeader()
.
This is what I am trying to do in the shinydashboard basic setup:
I can use the strategy from this answer to get the text in the header, but it is well grounded (which I can probably fix the 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?
source to share
dashboardHeader
expects elements of type dropdownMenu
. Thus, it will be difficult to find a non-hacky solution. Possible (hacky) options are: a) Modify the function, dashboardHeader
or b) use JavaScript code to add text after the header is created. Below is my attempt to solve your problem with JavaScript, maybe this can 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)
source to share
Slightly modified version of Geovany's code for adjusting font autosize, placement, etc. will 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 stylesheet (style.css in directory1) that controls the text options when resizing windows with a given maximum size and unlimited compression 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
}
}
execute with:
shiny::runApp("path to directory1")
source to share
Adding on to Geovany and Tiffany's answers, if you want the text content to be dynamic, you can change it based on user input using a function shinyjs::html
.
For example, I use it to display the name of the selected tab in the header. You can access the name of the selected tab in the server function if you specified the sidebar menu id
, in my case it is tabs
.
I also had to add id
in div
, which is added to the header in Geovany's code, in this case pageHeader
:
tags$script(HTML('
$(document).ready(function() {
$("header").find("nav").append(\'<div id="pageHeader" class="myClass"></div>\');
})
'))
Then adding this parameter to the server function will change the header text to reflect the selected tab, when used switch
to create a more presentable header format:
observeEvent(input$tabs, {
header <- switch(input$tabs,
tab1 = "Tab 1",
tab2 = "Tab 2",
tab3 = "Tab 3")
shinyjs::html("pageHeader", header)
})
source to share