R shiny using css with modal dialog

Question

I want to use a modal dialog within a R shiny app using a certain css style. I am able to use a modal dialog without the css style and I am able to use the css style without the modal dialog. However, if I try to run a modal dialog and the css style at the same time, the modal dialog does not show up anymore.

The following code can be used to reproduce my outcome. My css stylesheet is flatly from https://bootswatch.com/ , it needs to be saved in a subdirectory called www . To see the various outcomes comment and uncomment the line theme = "bootstrap-flatly.css" :

shinyApp(ui=fluidPage(
  theme = "bootstrap-flatly.css",
  h1("Heading"),
  div("Some text"),
  selectInput("selectInput", "SomeInput", c(1,2,3),selected = NA, multiple = TRUE),
  actionButton("print","print")
),
server <- function(input,output){
  showModal(modalDialog(
    title = "My message",
    easyClose = FALSE,
    footer = actionButton("closemodal", "OK")
  ))
  observeEvent(
    {
      input$closemodal
    },{
      removeModal()})
  observeEvent(input$print, reactiveValuesToList(input) %>% print)
}
)

Can anybody explain this behaviour and hint how I could get the css style to work with my modal dialog?

Answer 1

This problem is mentioned here but I couldn't apply the solution to your situation (I tried to modify the css file to include .modal {z-index: 1050;} but no success).

An alternative is to use the shinythemes package, which provides the flatly theme without requiring to download anything.

library(shiny)
library(shinythemes)

shinyApp(ui=fluidPage(
  theme = shinytheme("flatly"),
  h1("Heading"),
  div("Some text"),
  selectInput("selectInput", "SomeInput", c(1,2,3),selected = NA, multiple = TRUE),
  actionButton("print","print")
),
server <- function(input,output){

  showModal(modalDialog(
    title = "My message",
    easyClose = FALSE,
    footer = actionButton("closemodal", "OK")
  ))

  observeEvent(
    {
      input$closemodal
    },{
      removeModal()})
  observeEvent(input$print, reactiveValuesToList(input) %>% print)
}
)