actionButton/showModal does not work with shinythemes

[tdyoshida]

I'm new to Shiny, and I apologize if I'm doing something totally stupid.

I try to create multi-page shiny app; the first page with multiple cards, and the second page with sidebarLayout and actionButton.

I'd like to make confirmation dialog to appear when I press the actionButton. However, it does not work as expected depending on the theme/layout.

Below is the minimal working code.
The actionButton works as expected, but when I uncomment the line theme = shinytheme("cerulean"),, it does not.
Also, if I comment the line of page_fillable (and the corresponding closing bracket), the actionButton works even when shinytheme is activated. But the card layout does not work without page_fillable.

Could anybody help me what I'm doing wrong?
Thanks!

library(shiny)
library(shinythemes)

ui <- navbarPage(
  title = "test",
  # theme = shinytheme("cerulean"),
  nav_panel("tab1",
    page_fillable(
      layout_columns(
        card(
          card_header(h5("card1")),
          "This is a text for card1"
        ),
        card(
          card_header(h5("card2"))
        ),
        card(
          card_header(h5("card3"))
        )
      ),
      layout_columns(
        card(
          card_header(h5("card4"))
        ),
        card(
          card_header(h5("card5"))
        ),
        card(
          card_header(h5("card6"))
        )
      )
    )
  ),
  nav_panel(
    title = "tab2",
    sidebarLayout(
      sidebarPanel(
        actionButton(
          "button",
          "OK"
        ),
        width = 2,
      ),
      mainPanel(
        h4("Some data")
      )
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$button, {
    showModal(modalDialog(
      title = "Are you sure?",
      footer = tagList(
        modalButton("Not sure"),
        actionButton("ok", "YES!")
      )
    ))

    observeEvent(input$ok, {
      removeModal()
      Sys.sleep(0.2)
      stopApp()
    })
  })
}

shinyApp(ui, server)

[keithn]

You could try using the bslib::bs_theme() method for specifying the page theme:

theme = bs_theme(preset = "cerulean")

This should fix your modal that isn't appearing, but would also upgrade you to Bootstrap 5 so may break the styling of an existing application, but as you are using a lot of bslib components to start with, it might be handled for you. If it's a new app, it might not be a bad idea to start with bootstrap version 5 anyway. (Don't forget to load the bslib package using library(bslib)).

If you want to know what was happening with shinythemes, the cerulean Bootswatch theme in Shiny themes seemed to be incompatible with the bslib components being used. The cerulean CSS code was adding a opacity: 0; CSS style, which meant the modal was being created, but it was transparent.

Unticking the opacity option makes the modal appear, but a series of other CSS styling options place it in the wrong location anyway.

Easiest way to make sure the Cerulean Bootswatch theme is compatible with the bslib components being used? Let bslib load the appropriate Bootswatch theme through bs_theme()'s preset argument.