[Bug]: Empty state content overlays modal dialog

[calderonsamuel]

Guidelines

• [X] I agree to follow this project's Contributing Guidelines.

Project Version

1.0

Platform and OS Version

Tested in Windows and Google Chrome

Existing Issues

No response

What happened?

I wanted to use a modal when the empty state content is shown

Steps to reproduce

1. Run the following app. Try showing the modal with and without the empty state shown.

library(shiny)
library(shiny.emptystate)

ui <- fluidPage(
  use_empty_state(),
  actionButton("show", "Show empty state!"),
  actionButton("hide", "Hide empty state!"),
  actionButton("modal", "Show modal"),
  tableOutput("my_table")
)

server <- function(input, output, session) {
  empty_state_content <- div(
    "This is  example empty state content"
  )

  empty_state_manager <- EmptyStateManager$new(
    id = "my_table",
    html_content = empty_state_content
  )

  observeEvent(input$show, empty_state_manager$show())

  observeEvent(input$hide, empty_state_manager$hide())

  observeEvent(input$modal, {
    showModal(modalDialog(title = "Hello from modal"))
  })

  output$my_table <- renderTable(mtcars)
}

shinyApp(ui, server)

Expected behavior

The modal shoul be over the empty state content

Attachments

No response

Screenshots or Videos

No response

Additional Information

It seems to be that the problem is here:

https://github.com/Appsilon/shiny.emptystate/blob/9963c95b98810c3638178918ca0db1038731a19d/inst/emptystate.css#L8-L10

But I don't know what would be the best solution for it 🤔

[rszymanski]

@calderonsamuel thank you for reporting the issue (and for the reproducible example!)

You are right with your diagnosis! It is caused by a large z-index number of the .empty-state-container class.

A way to fix your example is either:

1. Override the style for .empty-state-container and make the z-index attribute lower than the z-index attribute of the modal
2. Override the style of the modal and make the z-index attribute higher than the z-index attribute of the empty state container

Here is a code snippet for option no. 1:

library(shiny)
library(shiny.emptystate)

ui <- fluidPage(
  tags$style("
    .empty-state-container {
      z-index: 999;
    }
  "),
  use_empty_state(),
  actionButton("show", "Show empty state!"),
  actionButton("hide", "Hide empty state!"),
  actionButton("modal", "Show modal"),
  tableOutput("my_table")
)

server <- function(input, output, session) {
  empty_state_content <- div(
    "This is  example empty state content"
  )

  empty_state_manager <- EmptyStateManager$new(
    id = "my_table",
    html_content = empty_state_content
  )

  observeEvent(input$show, empty_state_manager$show())

  observeEvent(input$hide, empty_state_manager$hide())

  observeEvent(input$modal, {
    showModal(modalDialog(title = "Hello from modal"))
  })

  output$my_table <- renderTable(mtcars)
}

shinyApp(ui, server)

It can be hard to pick the right z-index value for each situation as for example we might want to show spinners, or tooltips over empty state content and we may not know what their z-index value is.

I'd say a potential solution would be passing a z-index parameter to empty_state_manager and send it over to the JavaScript code that would set the z-index attribute of the empty-state container instead of having it hard coded. Happy to review a PR that implements that!

Let me know if that helps!