RinteRface / shinydashboardPlus

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

Setting CSS for individual menuItems #62

Open Sbirch556 opened 4 years ago

Sbirch556 commented 4 years ago

Via the https://rinterface.com/shiny/shinydashboardPlus example provided the dashboard appears to either have css hard coded for each menu item. Or there is some argument that allows for the menu item to adjust based on the height taken up by the contents of that menu item....I've been using tags$head(tags$style(HTML('.content-wrapper { height: 2050px !important;}'))) placed in the dashboardSidebar to give more room for the content in the dashboard body.

This did not work for me when I tried placing this code in individual menu items, it only works when placed in the dashboard dashboardSidebar and gives all of the other menu items the same space. How did you go about either hard coding the css for each menu item or is there an argument I am missing from the documentation to get the same results you have in the demo above.

DivadNojnarg commented 4 years ago

Can you provide a reprex please?

Sbirch556 commented 4 years ago
 library(shiny)
 library(shinydashboardPlus)
 library(shinydashboard)

 ui <- dashboardPagePlus(

   dashboardHeaderPlus(title = "DashboardPlus",titleWidth = "300px"),

   dashboardSidebar(width = "150px",

               tags$head(tags$style(HTML('.content-wrapper { height: 2500px !important;}'))),

               sidebarMenu(
                 menuItem("Menu 1", tabName = "menu_1", icon = icon("home")),
                 menuItem("Menu 2", tabName = "menu_2", icon = icon("globe")))),

   dashboardBody())

 server <- function(input, output) {

 }

 shinyApp(ui = ui, server = server)

This will "globally" set the css values for all menu items by including tags$head(tags$style(HTML('.content-wrapper { height: 2500px !important;}'))). The link I provided above has menuitems with different css values for each one, how would I go about implementing this?

Sbirch556 commented 4 years ago

The content-wrapper appears to be the relevant element. When I create a dashboard whose ouput extends further than the content-wrapper the content section will extend further and create this image Which is not the desired output, instead I would like the content-wrapper to extend just as far as the content. I'd also like to adjust the content-wrapper between menuitems so one menu's contents and wrapper can be shorter or longer than another. This does not need to be dynamic, I can hard code the css values for the menu items. The link I provided with the question looks like a good examples of how someone implemented this as all of the menuitems are different lengths.