RinteRface / shinydashboardPlus

extensions for shinydashboard
https://shinydashboardplus.rinterface.com
Other
454 stars 77 forks source link

width in dashboardControlbar not working as expected when overlay = FALSE #95

Closed hugolarzabal closed 3 years ago

hugolarzabal commented 3 years ago

Hello,

I ran into an issue with the dashboardControlbar width (formerly rightSidebar).

This problem seems to only happen when the option overlay is FALSE (body is resized when the sidebar is opened)

In that case, the width does not seem to fully apply to the sidebar.

Here is a minimal example:

`library(shiny) library(shinydashboard) library(shinydashboardPlus)

ui <- dashboardPage( dashboardHeader( title = "test" ), dashboardSidebar(), controlbar = dashboardControlbar( skin = "light", width = 50, overlay = F ),

dashboardBody(box(width = 12, h3("test"))) )

server <- function(input, output) {}

shinyApp(ui, server)`

image

In that example, I did set the skin to "light", so we can see that the new width and color only apply to part of the sidebar.

Digging into the css, I found this part that seems to be causing the problem: @media (min-width:768px) {.control-sidebar-open .content-wrapper,.control-sidebar-open .main-footer, .control-sidebar-open .right-side {margin-right:230px}}

The following code seems to fix the problem: ` resize <- function(){ tags$head(tags$style(HTML( "@media (min-width:768px){.control-sidebar-open .content-wrapper,.control-sidebar-open .main-footer, .control-sidebar-open .right-side{margin-right:50px}}"

))) }

library(shiny) library(shinydashboard) library(shinydashboardPlus)

ui <- dashboardPage( dashboardHeader( title = "test" ), dashboardSidebar(), controlbar = dashboardControlbar( skin = "light", width = 50, overlay = F, resize() ),

dashboardBody(box(width = 12, h3("test"))) )

server <- function(input, output) {}

shinyApp(ui, server)`