Multiple notifications in different places shiny app - css

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")
})
}
)
}

Answer 1

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)

Answer 2

So according to Florian, one answer could be:
library(shiny)
ui <- fluidPage(
tags$style("#shiny-notification-showme_notif {position: fixed; top: 800px; left: 40px; width: 15em; opacity: 1;}"),
tags$style("#shiny-notification-welcome_notif {position: fixed; top: 800px; right: 40px; width: 15em; opacity: 1;}"),
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)
and can be modified, as required.