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) { }
)
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)
1. Color issue using only the bs4Dash package
I am starting to use the package bs4Dash and I am facing a problem with the background color of the left sidebar bs4Dash::dashboardSidebar(). I observe that when I start the app the background color of the left sidebar is always in gray, but when I switch to dark mode and back to light mode the color render with a white color background.
You can observe this behavior using the code below that was taken from help webpage of bs4Dash
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody()
),
server = function(input, output) {}
)
2. Color problem using fresh and bs4Dash package
Using the package fresh when I open the app for the first time It is still with the grey background color, but when I switch from dark mode to light It renders the color according to fresh::create_theme().
Here is an example
# library
library(shiny)
library(bs4Dash)
library(fresh)
# theme creator with fresh::
mytheme <- create_theme(
bs4dash_sidebar_light(
bg = "#FFFF00")
)
#shinyApp
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody(use_theme(mytheme)),
freshTheme = TRUE
),
server = function(input, output) {}
)
I found out this issue in the Github but can't figure out how to solve this problem.
This problem was mentioned in this issue. You can fix it by adding skin = "light" in dashboardSidebar(), as below:
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(skin = "light"),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody()
),
server = function(input, output) {}
)
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 was trying to add website information on my shiny dashboard and for the "About" section (See image) I want few lines to be displayed on the dashboard body when clicked on that tab. how could i possibly achieve it? I could successfully add href for the "contact" section.
Maybe I do not understand your question properly, but what about:
library(shiny)
library(shinydashboard)
header <- dashboardHeader()
sidebar <- dashboardSidebar(
sidebarMenu(
id = "tabs",
menuItem("About", icon = icon("info"), tabName = "about"),
menuItem("Contact", icon = icon("phone"), tabName = "contact")
)
)
)
body <- dashboardBody(
tabItems(
tabItem("about",
h1("About")),
tabItem("contact",
h1("Contact"))
)
)
shinyApp(
ui = dashboardPage(header, sidebar, body),
server = function(input, output) { }
)
When you click on About you get a new tab in the dashboardBody where you can display whatever you want.
Update
Based on your clarification you can use shinyjs to hide/show the relevant part:
library(shiny)
library(shinydashboard)
library(shinyjs)
header <- dashboardHeader()
sidebar <- dashboardSidebar(
sidebarMenu(
id = "tabs",
menuItem("About", icon = icon("info"), tabName = "about"),
menuItem("Contact", icon = icon("phone"), tabName = "contact")
)
)
)
body <- dashboardBody(
useShinyjs(),
fluidPage(
fluidRow(id = "mainContent",
column(12, h1("Main Content"))
),
hidden(fluidRow(id = "contact", h1("Contact Info")))
)
)
shinyApp(
ui = dashboardPage(header, sidebar, body),
server = function(input, output) {
observe({
if (input$tabs == "contact") {
hideElement("mainContent")
showElement("contact")
} else {
hideElement("contact")
showElement("mainContent")
}
})
}
)
When you now click on Contact the main part is hidden and the contact is shown. I have, however, the feeling that is a bit mis-using the idea of shinydashboard.
#thothal, it did not allow me to add as a comment coz of the length, hence posting my comment(below) as an answer.
I am sorry if I was unclear. However, your answer helped me partially. I have incorporated tabItems part in my dashboardBody section, as shown below:
dashboardBody(
fluidPage(
fluidRow(
column(12, div(dataTableOutput("dataTable")))
)
),
tabItems(
tabItem("About", h1("text to be displayed"))
)
)
but the "text to be displayed" shows up below the table.
What I want is, About section (when clicked) should display only the text and not the table. I understand this is just formatting of the code in dashboardBody section but I don't know how to do it.
Just to be more clear, my dashboard's section should display the datatable at all times and the about section when clicked should show up the text and not the datatable. I really hope this is clear. Thanks a ton for your help :)
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: