Shinydashboard: Make sidebarPanel overlay over mainPanel - css

Question

I am trying to make the sidebarPanel overlay the mainPanel inside a tabBox but using z-index doesn't seem to work. I.e. the box size shouldn't change when the button is clicked and the sidebarPanel appears, it should just overlay the mainPanel
library(shiny)
library(shinydashboard)
library(shinyjs)
header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
useShinyjs(),
fluidRow(
div(id = "TimingBox",
tabBox(id = "Timing",
tabPanel("Tab 1",
sidebarLayout(
div(id = "Sidebar",
style = "z-index: 1000;",
sidebarPanel("There are currently 20 overdue here", width = 6)
),
mainPanel(plotOutput("plot1"), width = 12)
)
),
tabPanel("Tab 2"),
title = p("Status",actionLink("Link", NULL, icon = icon("plus-square-o")),actionLink("Link2", NULL, icon = icon("search"))), width = 4,
selected = "Tab 1"
)
)
)
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output) {
shinyjs::hide(id = "Sidebar")
observeEvent(input$Link, {
shinyjs::toggle(id = "Sidebar")
})
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(50)]
hist(data)
})
}
shinyApp(ui, server)

Answer 1

For the Main Sidebar
The sidebar position is not depending on the z-index of the sidebar and/or the main panel.
So changing these values will not give you your desired behaviour.
What you can do is changing the margin-left css attribute of the main panel to 0px to achieve your desired result.
With this code you can achieve this, just simply add it to your dashboardBody
tags$style(".content-wrapper{margin-left: 0px;}")
Resulting in following complete code:
library(shiny)
library(shinydashboard)
library(shinyjs)
header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
useShinyjs(),
tags$style(".content-wrapper{margin-left: 0px;}"),
fluidRow(
div(id = "TimingBox",
tabBox(id = "Timing",
tabPanel("Tab 1",
sidebarLayout(
div(id = "Sidebar",
style = "z-index: 1000;",
sidebarPanel("There are currently 20 overdue here", width = 6)
),
mainPanel(plotOutput("plot1"), width = 12)
)
),
tabPanel("Tab 2"),
title = p("Status",actionLink("Link", NULL, icon = icon("plus-square-o")),actionLink("Link2", NULL, icon = icon("search"))), width = 4,
selected = "Tab 1"
)
)
)
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output) {
shinyjs::hide(id = "Sidebar")
observeEvent(input$Link, {
shinyjs::toggle(id = "Sidebar")
})
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(50)]
hist(data)
})
}
shinyApp(ui, server)
EDIT:
For the info Icons Sidebar:
The following will do what you want:
adding the following to the style paramerter of your sidebar div will get that done
position: fixed;
Even though this is a solution I would highly recommend you to checkout the shinydasboardPlus package and theire version of the tabbox sidebar/help. Maybe this would also be fine for you and it would require less manuel effort on your side https://github.com/RinteRface/shinydashboardPlus
They also have a demo hosted here: https://rinterface.com/shiny/shinydashboardPlus/
library(shiny)
library(shinydashboard)
library(shinyjs)
header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
useShinyjs(),
fluidRow(
div(id = "TimingBox",
tabBox(id = "Timing",
tabPanel("Tab 1",
sidebarLayout(
div(id = "Sidebar",
style = "z-index: 1000;position: fixed;",
sidebarPanel("There are currently 20 overdue here", width = 6)
),
mainPanel(plotOutput("plot1"), width = 12)
)
),
tabPanel("Tab 2"),
title = p("Status",actionLink("Link", NULL, icon = icon("plus-square-o")),actionLink("Link2", NULL, icon = icon("search"))), width = 4,
selected = "Tab 1"
)
)
)
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output) {
shinyjs::hide(id = "Sidebar")
observeEvent(input$Link, {
shinyjs::toggle(id = "Sidebar")
})
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(50)]
hist(data)
})
}
shinyApp(ui, server)