Allow multiple lines in notificationItem text

[FvD]

Lines in the notificationItem text area do not wrap at the end of the notification area. Is it possible to have notification items with multiple lines show up nicely next to the icon?

I tried to include the tag$br with a div and without a div, but neither show up as I would like them to.

notifications <- dropdownMenu(type = "notifications", badgeStatus="info",
       notificationItem(icon=icon("warning"), status="danger",
       text = tags$div("With a div tag everything is",
       tags$br(),
       "below the icon")
       ),
      notificationItem(icon=icon("warning"), status="danger",
       text = tags$b("This line is besides the icon",
       tags$br(),
       "and this line no longer is")
        ))

results in:

[wch]

You can add CSS directly to a div so that displays that way. What you want is display: inline-block and vertical-align: middle. For example:

library(shiny)
library(shinydashboard)

notifications <- dropdownMenu(type = "notifications", badgeStatus="info",
  notificationItem(icon=icon("warning"), status="danger",
    text = tags$div("With a div tag everything is",
      tags$br(),
      "below the icon")
  ),
  notificationItem(icon=icon("warning"), status="danger",
    text = tags$b("This line is besides the icon",
      tags$br(),
      "and this line no longer is")
  ),
  notificationItem(icon=icon("warning"), status="danger",
    text = tags$div("With a div tag and display: inline-block",
      tags$br(),
      "it appears to the right.",
      style = "display: inline-block; vertical-align: middle;")
  )
  )

header <- dashboardHeader(title="Test Wide Tables", notifications)

sidebar <-  dashboardSidebar(
  sidebarMenu(
    menuItem("First menu item", tabName="first"),
    menuItem("Second menu item", tabName="second")
  )
)

body <- dashboardBody(
  tabItems(                   
    tabItem(tabName="first",
      h2("First menu item")
    )
  ),
  tabItem(tabName="second",
    h2("Second menu item")
  )
)

ui<-dashboardPage(
  header,
  sidebar,
  body
)
server<-function(input, output) { }

shinyApp(ui, server)

Note that the icons are smaller after the AdminLTE 2 update. This is what it looks like now:

[FvD]

Thanks!

[HugoGit39]

FYI you can also use (HTML("test<br/> test")

[YongbingDing]

您好，丁永兵已经收到您的邮件，谢谢。