I have the following code that makes a simple shiny app.
```
library(shinydashboard)
library(shiny)
ui <- dashboardPage(
dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '60', width ='100')),
dashboardSidebar(
sidebarMenuOutput("menu")
),
dashboardBody()
)
server <- function(input, output) {
output$menu <- renderMenu({
sidebarMenu(
menuItem("Overview", icon = icon("tachometer"))
)
})
}
shinyApp(ui, server)
```
And the image is outputted on top of the menu to the right, but my goal would be to have the image be more in the middle of the dashboard. I know the menu shifts the navabr a bit but I would like to keep it as center as possible.
But my desired output would be like this. I made a sample with paint. Is it possible to still have some text or if a reference can be posted where I can learn more about the dashboard header function I would appreciate it.
Here you go
There is no way you can add the image to the header part on the right side with the function from shinydashboard
, but let's have fun with the latest htmltools
by injecting styles and tags into the header.
library(shinydashboard)
library(shiny)
header_img <- tags$img(
src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
style = 'height: 50px; width: 100px; position: absolute; left: 50%; transform: translateX(-50%);'
)
header <- htmltools::tagQuery(dashboardHeader(title = ""))
header <- header$
addAttrs(style = "position: relative")$ # add some styles to the header
find(".navbar.navbar-static-top")$ # find the header right side
append(header_img)$ # inject our img
allTags()
ui <- dashboardPage(
header,
dashboardSidebar(
sidebarMenuOutput("menu")
),
dashboardBody()
)
server <- function(input, output) {
output$menu <- renderMenu({
sidebarMenu(
menuItem("Overview", icon = icon("tachometer"))
)
})
}
shinyApp(ui, server)
The img is placed on the center of right side header, not the center of the entire header length. If you want to adjust to the center of the whole length, try to change translateX(-50%)
of the img to a number you like.
How to add a image on the left side, a text on middle and a image on right side on header?
use
append
to inject your components into the header. change the CSSleft
orright
to make it align to left or right. or you can useflex
layout, but inject order matters withflex
. You can google these CSS terms if you are not familiar.