CODEWITHSUNDEEP
cssshinyshinydashboard
Kevin
Kevin

Reputation: 2044

Shinydashboard: Make sidebarPanel overlay over mainPanel

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)

Upvotes: 2

Views: 1070

Answers (1)

Frank Steiner
Frank Steiner

Reputation: 121

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)

Upvotes: 1

Related Questions