shinyDashboard - change width of dropDownMenu

Question

I'm using a "notifications" style dropDownMenu in my shinyDashboard app as a way of printing help messages for the user - much like in the examples on the main shinyDashboard website. However, I'm finding that messages past a certain length (around 40 characters, so not very long) don't fit in the box, and instead trail off with an ellipsis. This would be fine, but I can't find any way of accessing the full message, ie. clicking or hovering over the text does nothing.

Is there are way of changing the width of this box to allow for longer messages? Or alternatively, is there a way of putting line breaks in a message so that it spans multiple lines (I've found that "/n" doesn't work).

Thanks, Bob

For multi-line see github.com/rstudio/shinydashboard/issues/21. — Paul Hiemstra

thisislammers thisislammers · Accepted Answer · 2017-12-21T21:08:09

You can change the width of the box using custom CSS inside the dashboardBody(). Simply insert the following code inside the beginning of your dashboardBody:

    tags$head(tags$style(HTML('
  .navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
  width:900px;
  }
  ')))

In this example, I've set the width to 900px.

For future reference, it's useful to use R's built-in inspect element tool to see what the CSS selectors are for the component you're trying to manipulate. You can do this by right-clicking anywhere in your shiny app window when it is running and choosing "inspect."

shinyDashboard - change width of dropDownMenu

1 Answers