Search code examples
rshinyshinybs

Shiny - bsModal all grayed out with shinythemes


I use the library shinythemes pretty extensively in apps that I build. I was trying to leverage a bsModal from the shinyBS package and noticed that the 'fade in' div never went away leaving me with an unusable web app since nothing was clickable.

The examples from shinyBS::bsModal all work fine (they are sans-shinythemes). How can I continue to use themes while also using modals?

Example App:

library(shiny)
library(shinyBS)
library(shinythemes)

app = shinyApp(
  ui =
    navbarPage(title=NULL,
      id="navbar",
      theme = shinytheme("journal"),
      tabPanel("test",
        column(1),
        column(3,
          sliderInput("bins",
            "Number of bins:",
            min = 1,
            max = 50,
            value = 30),
          actionButton("tabBut", "View Table")
        ),
        column(7,
          plotOutput("distPlot"),
          bsModal("modalExample", "Data Table", "tabBut", size = "large",
            dataTableOutput("distTable"))
        )
      )
    ),
  server =
    function(input, output, session) {

      output$distPlot <- renderPlot({

        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')

      })

      output$distTable <- renderDataTable({

        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        tab <- hist(x, breaks = bins, plot = FALSE)
        tab$breaks <- sapply(seq(length(tab$breaks) - 1), function(i) {
          paste0(signif(tab$breaks[i], 3), "-", signif(tab$breaks[i+1], 3))
        })
        tab <- as.data.frame(do.call(cbind, tab))
        colnames(tab) <- c("Bins", "Counts", "Density")
        return(tab[, 1:3])

      }, options = list(pageLength=10))

    }
)

runApp(app)

Solution

  • I don't know what causes the conflict, but the solution is to specify the link to the theme directly. Replace theme = shinytheme("journal") with theme = "http://bootswatch.com/journal/bootstrap.css" adjusting the name for the theme you're using.