shinydashboard Sidebar Menu Overflow

7
votes

Is there any way to fit some sort of text on shinydashboard with word wrap? The default behaviour seems to be for it to spill over into the body area.

I would like to avoid modifying css directly however if there is a workaround which involves modifying CSS as part of the server / ui code itself then I'm open to that.

ui <- dashboardPage(
   dashboardHeader(
      title = "Sidebar spill"

   ),
   dashboardSidebar(
      sidebarMenu(
         menuItem(text = "sfsdf sfaosh oas fwue wi aseiu wehw wuer woeur owuer  ")
         )
      ),
   dashboardBody(
      fluidRow(

      )
   )
)

server <- function(input, output) {

}

shinyApp(ui, server)
}
2
cssrshinyshinydashboard
This sounds like something that can be solved by setting your CSS. Something like this: w3schools.com/cssref/css3_pr_word-wrap.asp – Shape
I've tried it and some other CSS tricks too but have been unable to get a solution. The best I've managed are scrollbars with overflow. – TheComeOnMan
if you want to modify it as part of the code, you can always use tags$head(tags$style(PUTCSSCODEHERE)). You can always paste together your css programmatically if you're willing to return those tags from a renderUI – Shape
Could you show a working example please? – TheComeOnMan

2 Answers

3
votes

The file "AdminLTE.min.css" (this version of it anyway in this version of Shinydashboard) specifies "white-space: nowrap !important" for the "sidebar-menu" class as well as "li" elements with class "header" that are direct descendents of elements with the "sidebar-menu" class. I saw that the "li" elements in the sidebar menu of my Shinydashboard application do not have the "header" class, so I overrode "white-space: nowrap !important" (that was being applied because the "ul" element containing the menu is of class "sidebar-menu") by adding the following CSS to a custom CSS file:

.sidebar-menu > li {
    white-space: normal;
}
0
votes

what about something like this

...
  dashboardSidebar(
    sidebarMenu(
      tags$div(class="header", checked=NA,
               tags$p("sfsdf sfaosh oas fwue", tags$br(), "wi aseiu wehw wuer woeur owuer")
      )
    )
  ),
...