I have a basic shiny dashboard below and I would like to know if I can a little bit left or right the bs button "show/hide sidebar".
#ui.r
library(shinydashboard)
library(shiny)
library(shinyBS)
dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = TRUE),
dashboardBody(
tabsetPanel(
id = 'testingDPEtab',
tabPanel("Upload",
bsButton("showpanel8", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE),
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody())
)
)
))
#server.r
server <- function(input, output) { }
Depending on whether you want to apply the "moving" to a specific button or for all these buttons you can do:
tags$head(
tags$style(HTML('#showpanel8{margin-left:10px}'))
)
Here, the button is referenced by id. So the change will only apply to that button.
#showpanel8{margin-left:10px} is CSS syntax to style the button.
For other margins you can use:
margin-top
margin-right
margin-bottom
margin-left
See here: https://www.w3schools.com/css/css_margin.asp.
Full reproducible example:
library(shinydashboard)
library(shiny)
library(shinyBS)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = TRUE),
dashboardBody(
tags$head(
tags$style(HTML('#showpanel8{margin-left:10px}'))
),
tabsetPanel(
id = 'testingDPEtab',
tabPanel("Upload",
bsButton("showpanel8", "Show/Hide sidebar",
icon = icon("toggle-off"), type = "toggle",
style = "info", value = TRUE),
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody())
)
)
))
#server.r
server <- function(input, output) { }
shinyApp(ui, server)
Related
How is it possible to hide the left sidebar of a shinydashboard() totally without also affecting the header section that almost hides the title by using the toggle button that is already there?
## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
ui <- dashboardPage(
dashboardHeader(title = "dashboard"
),
dashboardSidebar(),
dashboardBody(
useShinyjs(),
tags$hr(),
tabsetPanel(
id ="tabA",
type = "tabs",
tabPanel("Front",icon = icon("accusoft")),
tabPanel("Data", icon = icon("table")
)
)
),
controlbar = dashboardControlbar()
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Just use shinydashboardPlus::dashboardSidebar()'s minified parameter:
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
ui <- dashboardPage(
dashboardHeader(title = "dashboard"),
dashboardSidebar(minified = FALSE),
dashboardBody(
useShinyjs(),
tags$hr(),
tabsetPanel(
id ="tabA",
type = "tabs",
tabPanel("Front",icon = icon("accusoft")),
tabPanel("Data", icon = icon("table")
)
)
),
controlbar = dashboardControlbar()
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
Maybe you can call the shinydashboard::dashboardSidebar instead:
ui <- dashboardPage(
dashboardHeader(title = "dashboard"),
shinydashboard::dashboardSidebar(collapsed = TRUE,disable =TRUE),
dashboardBody(
useShinyjs(),
tags$hr(),
tabsetPanel(
id ="tabA",
type = "tabs",
tabPanel("Front",icon = icon("accusoft")),
tabPanel("Data", icon = icon("table")
)
)
),controlbar = dashboardControlbar()
)
How can you place text exactly in the middle between left and right end of shiny dashboard body at this height?
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = T),
dashboardBody(
fluidRow(
column(5,),
column(4,
span(h2(strong("Covid-19 Situation Dashboard"), style = 'font-size:30px;color:#6cbabf;')))
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Use align = "center", as shown below.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = T),
dashboardBody(
fluidRow(
#column(5,),
column(12,
span(h2(strong("Covid-19 Situation Dashboard"), align = "center", style = 'font-size:30px;color:#6cbabf;')))
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
How can I change the font size and color of title in shinydashboard box()?
library(shiny)
library(plotly)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width=12)),
fluidRow(
box(title="Title")
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
r
You can use a header tag and style option within it.
library(shiny)
library(plotly)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width=12)),
fluidRow(
box(title=h3("Title", style = 'font-size:42px;color:blue;'))
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
I have the shiny dashboard below and as you see I want to display a datatable inside sidebar but the issue is that the table is much wider. Can I make the table fit in exactly in the sidebar without increasing sidbar width?
library(shiny)
library(shinydashboard)
library(DT)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Table" , tabname = "my_table", icon = icon("table"),DT::dataTableOutput("example_table")
),
menuItem("Next Widget", tabName = "Other"))),
dashboardBody(
tabItems(
tabItem(tabName = "subMenu", #my_table",
fluidRow(
)),
tabItem(tabName = "Other",
h2("Other tab")
)
)))
server <- function(input, output) {
output$example_table <- DT::renderDataTable(head(mtcars))
}
shinyApp(ui, server)
One quick way is to enable horizontal scrolling for your DT. Then the table will fit the container but be scrollable:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Table" , tabname = "my_table", icon = icon("table"),DT::dataTableOutput("example_table")
),
menuItem("Next Widget", tabName = "Other"))),
dashboardBody(
tabItems(
tabItem(tabName = "subMenu", #my_table",
fluidRow(
)),
tabItem(tabName = "Other",
h2("Other tab")
)
)))
server <- function(input, output) {
output$example_table <- DT::renderDataTable(head(mtcars), options = list(scrollX=TRUE))
}
shinyApp(ui, server)
I am working in an application similar to one below. I have my input panel in sidebar under a menu which is initally expanded. I want to collapse the menu and hide all the input panel so that my sidebar will be clean. But It should appear when I expand (not permanently hide). I tried the following solution but it is not working. Please help me to find a solution or any alternative approach.
library(shiny)
library(shinydashboard)
library(shinyjs)
ui <- dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem(
startExpanded = TRUE,
"Menu 1",
column(
width = 12,
actionButton("hideMe", label = "Collapse Me", icon = icon("close"))
)
)
)
),
body = dashboardBody()
)
server <- function(input, output, server){
observeEvent(input$hideMe, {
shinyjs::hide(selector = "ul.menu-open");
})
}
runApp(shinyApp(ui, server))
You need to add useShinyjs() into ui part
library(shiny)
library(shinydashboard)
library(shinyjs)
ui <- dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(
useShinyjs(),
sidebarMenu(
menuItem(
startExpanded = TRUE,
"Menu 1",
column(
width = 12,
actionButton("hideMe", label = "Collapse Me", icon = icon("close"))
)
)
)
),
body = dashboardBody()
)
server <- function(input, output, server){
observeEvent(input$hideMe, {
shinyjs::hide(selector = "ul.menu-open");
})
}
runApp(shinyApp(ui, server))