Center the R Shiny showNotification on the screen

Question

Center the R Shiny showNotification on the screen

Currently, I'm exploring ways to customize the feature of showNotification() in Shiny.

Link to example notifications

My goal is to have the message appear at the center of the screen instead of the bottom-right corner. While it doesn't seem possible through native settings, I'm seeking suggestions or ideas on how to achieve this customization.

css r shiny shinydashboard

Answer 1

Answer №1

To customize the CSS class properties (specifically .shiny-notification), you can utilize tags$style. This allows you to modify other attributes such as width and height as well.

Here is the CSS snippet:

.shiny-notification {
             position:fixed;
             top: calc(50%);
             left: calc(50%);
             }

This code positions the notification at 50% of the screen's width and 50% of its height.

Incorporating the css code within shiny involves adding the following structure in the ui function.

tags$head(
      tags$style(
        HTML(CSS-CODE....)
      )
)

A comprehensive demonstration app can be found below:

library(shiny)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$style(
        HTML(".shiny-notification {
             position:fixed;
             top: calc(50%);
             left: calc(50%);
             }
             "
            )
        )
    ),
    textInput("txt", "Content", "Text of message"),
    radioButtons("duration", "Seconds before fading out",
                 choices = c("2", "5", "10", "Never"),
                 inline = TRUE
    ),
    radioButtons("type", "Type",
                 choices = c("default", "message", "warning", "error"),
                 inline = TRUE
    ),
    checkboxInput("close", "Close button?", TRUE),
    actionButton("show", "Show"),
    actionButton("remove", "Remove most recent")
  ),
  server = function(input, output) {
    id <- NULL

    observeEvent(input$show, {
      if (input$duration == "Never")
        duration <- NA
      else 
        duration <- as.numeric(input$duration)

      type <- input$type
      if (is.null(type)) type <- NULL

      id <<- showNotification(
        input$txt,
        duration = duration, 
        closeButton = input$close,
        type = type
      )
    })

    observeEvent(input$remove, {
      removeNotification(id)
    })
  }
)

The app template used here was sourced from the code provided in your initial link.

Answer 2

To customize the CSS class properties (specifically .shiny-notification), you can utilize tags$style. This allows you to modify other attributes such as width and height as well.

Here is the CSS snippet:

.shiny-notification {
             position:fixed;
             top: calc(50%);
             left: calc(50%);
             }

This code positions the notification at 50% of the screen's width and 50% of its height.

Incorporating the css code within shiny involves adding the following structure in the ui function.

tags$head(
      tags$style(
        HTML(CSS-CODE....)
      )
)

A comprehensive demonstration app can be found below:

library(shiny)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$style(
        HTML(".shiny-notification {
             position:fixed;
             top: calc(50%);
             left: calc(50%);
             }
             "
            )
        )
    ),
    textInput("txt", "Content", "Text of message"),
    radioButtons("duration", "Seconds before fading out",
                 choices = c("2", "5", "10", "Never"),
                 inline = TRUE
    ),
    radioButtons("type", "Type",
                 choices = c("default", "message", "warning", "error"),
                 inline = TRUE
    ),
    checkboxInput("close", "Close button?", TRUE),
    actionButton("show", "Show"),
    actionButton("remove", "Remove most recent")
  ),
  server = function(input, output) {
    id <- NULL

    observeEvent(input$show, {
      if (input$duration == "Never")
        duration <- NA
      else 
        duration <- as.numeric(input$duration)

      type <- input$type
      if (is.null(type)) type <- NULL

      id <<- showNotification(
        input$txt,
        duration = duration, 
        closeButton = input$close,
        type = type
      )
    })

    observeEvent(input$remove, {
      removeNotification(id)
    })
  }
)

The app template used here was sourced from the code provided in your initial link.

Center the R Shiny showNotification on the screen

Answer №1

Similar questions

What is the best way to structure the layout: Subdomains or External CSS for Web and Mobile Web?

ShadowBox not displaying Vimeo videos

Issue with CSS not loading correctly when switching routes in AngularJS using Gulp and Router

What is the process for converting x and y coordinates to align with a fixed display?

Creating a personalized aggregation method that accepts multiple inputs when using the dcast function

Auto-scrolling text box cursor movement

Having a newline between HTML elements can disrupt the structure of an HTML layout

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Transition smoothly between images using CSS in a continuous loop

Ways to modify the hue of an li element in the context menu upon hovering

Using Jquery's closest technique to target a class located outside of the parent div

CSS not being properly rendered on newly inserted row within table via jQuery

Creating a custom design for input outline borders using CSS3

How can I make a DIV grow taller without impacting neighboring DIVs?

Retrieve the initial digit following a particular line in R

Why my attempts to alter numerous CSS elements using JQuery are failing?

Determine whether the Bootstrap data-style attribute is enabled or disabled

Struggling with integrating a mixin in your Polymer project?

Development of an Angular 4 application utilizing a bespoke HTML theme

Is it possible to line up two divs perfectly?