Multiple notifications in different places shiny app

Question

I made a simple example to show my problem, which is:

how to set notifications at different places independently of each others (let's say I want each notification to be displayed at the top right and left, respectively)

```

library(shiny)

  ui <- fluidPage(

    # tags$head(
    #   tags$style(
    #     HTML(".shiny-notification {
    #          position: fixed;
    #          top: 800px;
    #          left: 40px;
    #          width: 15em;
    #          opacity: 1;
    #          }
    #          "
    #     )
    #   )
    # )

    actionButton("showme", "Show Notification:")

  )

  server <- function(input, output, session) {

    observe({

      showNotification(
        id = "welcome_notif",
        "Blablablablabla .... blablablabla.",
        duration = 20, 
        closeButton = TRUE,
        type = "message")

    })

    observeEvent(input$showme,{

      showNotification( 
        id = "showme_notif",
        "Hihihi", # put text in notification
        duration = 30, 
        closeButton = TRUE,
        type = "message")

    })

  }

  shinyApp(ui = ui, server = server)

```

I saw that there is a special CSS for notification in shiny code (https://github.com/rstudio/shiny/blob/master/inst/www/shared/shiny.css).

If I change the CSS class (as shown in commented code), I only manage to change the place where all notifications will be displayed (but not independently).

EDIT:

I tried to use addClass with shinyjs:

library(shiny)
library(shinyjs)

  ui <- fluidPage(

    useShinyjs(),
    inlineCSS(list(.customclass = "position: fixed; top: 200px;")),

    actionButton("showme", "Show Notification:")

  )

  server <- function(input, output, session) {

    observe({

      showNotification(
        id = "welcome_notif",
        "Blablablablabla .... blablablabla.",
        duration = 20, 
        closeButton = TRUE,
        type = "message")

    })

    observeEvent(input$showme,{

      showNotification( 
        id = "showme_notif",
        "Hihihi", # put text in notification
        duration = 30, 
        closeButton = TRUE,
        type = "message")

    })

    observe({
      addClass(id = "showme_notif", class = "customclass")
    })

  }

  shinyApp(ui = ui, server = server)

as suggested by Florian (see below) but it seems that I can only handle elements generated in UI and not in server like notifications.

For example this works:

if (interactive()) {
    shinyApp(
      ui = fluidPage(
        useShinyjs(),
        inlineCSS(list(.customclass = "position: fixed; top: 200px;")),
        p(id = "element", "Watch what happens to me")
      ),
      server = function(input, output) {
        observe({
          addClass(id = "element", class = "customclass")
        })
      }
    )
  }

Florian · Accepted Answer

I am able to modify the CSS of the element, since the notification gets the id: shiny-notifaction-xxx where xxx is the name of your notification. But all notifications are put together in another container, and I am unable to modify the CSS so that it does what you want.

library(shiny)

ui <- fluidPage(

  tags$style("#shiny-notification-showme_notif {margin:20px;}"),

  actionButton("showme", "Show Notification:")

)

server <- function(input, output, session) {

  observe({

    showNotification(
      id = "welcome_notif",
      "Blablablablabla .... blablablabla.",
      duration = 200, 
      closeButton = TRUE,
      type = "message")

  })

  observeEvent(input$showme,{

    showNotification( 
      id = "showme_notif",
      "Hihihi", # put text in notification
      duration = 300, 
      closeButton = TRUE,
      type = "message")

  })

}

shinyApp(ui = ui, server = server)

Multiple notifications in different places shiny app

Answers (2)

Related Questions