CODEWITHSUNDEEP
rshinyshinydashboardshinydashboardplus
firmo23
firmo23

Reputation: 8404

Fix the position of the shiny dashboard header toggle button

In the shiny app below I want the toggle button that shows and hides the sidebar to remain fixed in its position whether the sidebar is hidden or not. Now when the sidebar is hidden there is a blue square empty gap between the button and the beginning of the page.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
  
  dashboardHeader(
    titleWidth = 0
    
  ),
  dashboardSidebar(
  ),
  dashboardBody(
    tags$head(tags$style(HTML('
    /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                                background-image:url("https://www.r-project.org/logo/Rlogo.png");
                                background-position-x: 3%;
                                background-size: 170px 40px;
                                background-repeat: no-repeat;
                                background-color:#000;
                              }
        
       
                              '))),
    tags$style(type="text/css",".sidebar-toggle{ position: absolute;
    left: 0;
}")
    
  ),
  controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "light"

)
)

server <- function(input, output){
  
  
  
}

shinyApp(ui, server)

enter image description here

Upvotes: 1

Views: 636

Answers (1)

ismirsehregal
ismirsehregal

Reputation: 33397

You just have to reduce the left margin - please see margin-left: 0px !important;:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
  dashboardHeader(titleWidth = 0),
  dashboardSidebar(),
  dashboardBody(
    tags$head(tags$style(HTML('
    /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                                background-image:url("https://www.r-project.org/logo/Rlogo.png");
                                background-position-x: 3%;
                                background-size: 170px 40px;
                                background-repeat: no-repeat;
                                background-color:#000;
                                margin-left: 0px !important;
                              }
        
       
                              '))),
    tags$style(type="text/css",".sidebar-toggle{position: absolute; left: 0;}")
  ),
  controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "light")
)

server <- function(input, output){}

shinyApp(ui, server)

Upvotes: 1

Related Questions