I would like to know how can I adjust the height of dashboardheader in shinydashboard
dashboardHeader(
title = loadingLogo('http://company.fr/','logo.jpg','buffpowa.gif'),
titleWidth = 600
)
I can modify the width but the logo is too large for the header. I want the header to have enough height to display the full logo.
Thanks
You need to set the height of the following elements:.main-header and .main-header .logo. Also please note that it only works if they are set inside tags$li within the dropdown class.
Code
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
# Set height of dashboardHeader
tags$li(class = "dropdown",
tags$style(".main-header {max-height: 200px}"),
tags$style(".main-header .logo {height: 200px}")
),
# Use image in title
title = tags$a(href='http://company.fr/',
tags$img(src='logo.jpg'))
),
dashboardSidebar(
# Adjust the sidebar
tags$style(".left-side, .main-sidebar {padding-top: 200px}")
),
dashboardBody()
)
server <- function(input, output){}
shinyApp(ui, server)
Example
Using a 200x200 px android logo:
Related
I would like to know how can I totally skip the title section from shinydashboard header. So the first object to see will be the toggle button that hides and display the sidebar. Now if I set titlewidth to 0 there is still a small gap between the toggle button and the beginning of the page. Something like:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
titleWidth = 0
),
dashboardSidebar(
),
dashboardBody(
)
)
server <- function(input, output){}
shinyApp(ui, server)
Would adding this bit of CSS help?
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
titleWidth = 0
),
dashboardSidebar(
),
dashboardBody(
tags$style(type="text/css",".sidebar-toggle{ position: absolute;
left: 0;
}")
)
)
server <- function(input, output){}
shinyApp(ui, server)
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.
I have a Shiny app built with shinydashboard and I've just discovered shinydashboardPlus. One nice option is to have the sidebarMenu "minified", or when minimized it doesn't go away completely, but just displays the icons for each menuItem. However, with shinydashboardPlus, when minified, the title gets chopped off. With shinydashboard, the title stays intact, but the sidebar goes away completely.
Example code:
library(shiny)
library(shinydashboard)
#library(shinydashboardPlus)
# Basic dashboard page template
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(#minified = TRUE,
sidebarMenu(
menuItem('Menu1', tabName = 'Menu1',
icon = icon('folder-open')),
menuItem('Menu2', tabName = 'Menu2',
icon = icon('code-branch'))
)
),
dashboardBody()
),
server = function(input, output) { }
)
Leaving the comment marks in place and running it uses shinydashboard, and gives this initially:
And when the hamburger is clicked to minimize the sidebar, the whole sidebar disappears:
If the comment marks are removed so that it runs using shinydashboardPlus, minimizing it gives this, where I have the icons in the sidebar, but the title is chopped:
Is there a way to get the shinydashboardPlus minification that shows just the icons, but doesn't chop off the title?
Here you go
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
# Basic dashboard page template
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(#minified = TRUE,
sidebarMenu(
menuItem('Menu1', tabName = 'Menu1',
icon = icon('folder-open')),
menuItem('Menu2', tabName = 'Menu2',
icon = icon('code-branch'))
)
),
dashboardBody(
tags$style(
'
#media (min-width: 768px){
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 230px;
}
.sidebar-mini.sidebar-collapse .main-header .navbar {
margin-left: 230px;
}
}
'
)
)
),
server = function(input, output) { }
)
change the width and margin-left numbers if you have extreme long titles.
I am writing an app and I want the image in the sidebarPanel to be just a bit bigger than the image I put inside it. As the window gets smaller or larger, so does the sidebar, but the image stays static. How do I fix this problem? Is there a way to get the sidebar length or is there a better way to render images?
ui.R
library(shiny)
shinyUI(bootstrapPage(
# Application title
titlePanel("Sidebar Image App"),
sidebarPanel(
imageOutput("image", height = "auto")
)
))
server.R
library(shiny)
shinyServer(function(input, output, session) {
output$image <- renderImage({
return(list(
src = "one.png",
contentType = "image/png",
height = 185,
alt = "Face"
))
})
})
You can style the image using css tag as below:
shinyUI(bootstrapPage(
titlePanel("Sidebar Image App"),
tags$head(tags$style(
type="text/css",
"#image img {max-width: 100%; width: 100%; height: auto}"
)),
sidebarPanel(
imageOutput("image")
)
)),
where css id selector (here #image) should correspond to the outputId of the imageOutput.
I'm using shiny (0.12.0) with shinydashboard (0.4.0) in R (RRO 8.0.3 CRAN-R 3.1.3) to create a UI, and I'm liking what I'm seeing. However, I would like to be able to control the width of the dashboardSidebar item, since I need to put some wide selector boxes in there.
ui <- dashboardPage(
dashboardHeader(title = "My Dashboard"),
dashboardSidebar(#stuffhere) #would like a width param setting
dashboardBody()
)
Is there a way to do it (some well-hidden width parameter, or embedded css) or do I have to go back to boring shiny and build it from the ground up instead?
The width of the sidebar is set by CSS on the .left-side class, so you could do:
dashboardPage(
dashboardHeader(title = "My Dashboard"),
dashboardSidebar( tags$style(HTML("
.main-sidebar{
width: 300px;
}
")),selectInput("id","Select a survey",choices=c("Very very very very long text","text"))),
dashboardBody()
)
The old answer might still work, but there is also a width = ... option now. See:
https://rstudio.github.io/shinydashboard/appearance.html#sidebar-width. Here is the example code shown over there:
shinyApp(
ui = dashboardPage(
dashboardHeader(
title = "Title and sidebar 350 pixels wide",
titleWidth = 350
),
dashboardSidebar(
width = 350,
sidebarMenu(
menuItem("Menu Item")
)
),
dashboardBody()
),
server = function(input, output) { }
)