ShinyBS Modal is not working when I include bootstrap.css file

[manalikr]

Hi,

I am trying to use ShinyBS’s Modal control, but it does not work for me. When I have created an example exactly same as mentioned on the website it worked fine. I noticed that when I comment theme = "bootstrap.css" in my code it works fine. Can you please explain me why it does not work with a bootstrap file included in my code? And how can I get it working, as I need to keep my version of bootstrap.css file.

Regards, Manali

[bwaismeyer]

Noting that I'm observing a similar issue.

When I have "theme" set in my ui.R file (which requires the name of a CSS file of some type), I see odd behavior when a modal is triggered.

Specifically, the modal opens but becomes grayed out (like the page behind the modal). Clicking on the modal at all results in it closing.

If "theme" is commented out of the ui.R, then the modal behaves as normal (e.g., as observed in your example).

Here's a (partially) reproducible example. Note that you need to download a custom bootstrap.css, label it correctly, and place it in the application's "www" folder for this to work.

library(shiny)
shinyApp(
    ui = navbarPage(
        "The Case Outcome Simulator",

        theme = custom.css,

        # using COS to explore trends per predictor ("Explore Mode")
        tabPanel("Explore Mode", fluidPage(
            # define user tools in the first column
            # width = 3 of 12 (Shiny divides the horizontal space up into 12 sections)
            column(3, 
                   wellPanel(               
                       radioButtons("a", label = h4("Select X-Axis"), 
                                    choices = c("one", "two", "three")),

                       bsPopover("a",
                                 title = "VD1",
                                 content = "STUFF",
                                 trigger = "click",
                                 placement = "right"),

                       radioButtons("b", label = h4("Select X-Axis"), 
                                    choices = c("one", "two", "three")),

                       bsPopover("b",
                                 title = "VD2",
                                 content = "STUFF",
                                 trigger = "hover",
                                 placement = "right"),

                       sliderInput("c", label = h4("Select X-Axis"), 
                                    min = 0, max = 100, value = 50),

                       bsPopover("c",
                                 title = "VD3",
                                 content = "STUFF",
                                 trigger = "click",
                                 placement = "right"),

                       sliderInput("d", label = h4("Select X-Axis"), 
                                   min = 0, max = 100, value = 50),

                       bsPopover("d",
                                 title = "VD4",
                                 content = "STUFF",
                                 trigger = "hover",
                                 placement = "right")
                   )
            ),
            column(9,
                   textOutput("return_stuff")
            )
        ))
    ), 
    server = function(input, output, session) {
        output$return_stuff <- renderText({input$"x_axis_choice"})
    }
)

Interestingly, if you load the theme in an alternate manner - e.g., by using the shinythemes package - the issue does not occur.

library(shiny)
library(shinythemes)
shinyApp(
    ui = navbarPage(
        "The Case Outcome Simulator",

        theme = shinythemes("united"),

        # using COS to explore trends per predictor ("Explore Mode")
        tabPanel("Explore Mode", fluidPage(
            # define user tools in the first column
            # width = 3 of 12 (Shiny divides the horizontal space up into 12 sections)
            column(3, 
                   wellPanel(               
                       radioButtons("a", label = h4("Select X-Axis"), 
                                    choices = c("one", "two", "three")),

                       bsPopover("a",
                                 title = "VD1",
                                 content = "STUFF",
                                 trigger = "click",
                                 placement = "right"),

                       radioButtons("b", label = h4("Select X-Axis"), 
                                    choices = c("one", "two", "three")),

                       bsPopover("b",
                                 title = "VD2",
                                 content = "STUFF",
                                 trigger = "hover",
                                 placement = "right"),

                       sliderInput("c", label = h4("Select X-Axis"), 
                                    min = 0, max = 100, value = 50),

                       bsPopover("c",
                                 title = "VD3",
                                 content = "STUFF",
                                 trigger = "click",
                                 placement = "right"),

                       sliderInput("d", label = h4("Select X-Axis"), 
                                   min = 0, max = 100, value = 50),

                       bsPopover("d",
                                 title = "VD4",
                                 content = "STUFF",
                                 trigger = "hover",
                                 placement = "right")
                   )
            ),
            column(9,
                   textOutput("return_stuff")
            )
        ))
    ), 
    server = function(input, output, session) {
        output$return_stuff <- renderText({input$"x_axis_choice"})
    }
)

[bwaismeyer]

Update Verified that it's not just the particular theme I'm applying to my code. It seems to have to do with using a custom CSS file.

If I download the CSS file for "united" (one of the RStudio default themes) and use theme to point to that CSS, I get the modal-grayed-out error.

If I use shinythemes to set the same theme (shinythemes("united")), I don't get the error.

[manalikr]

Hi,

Thanks for the reply. I tried using shinythemes in my application, but it looks like it expects a specific theme defined in shinythemes package (Default, Cosmo etc.). We are not using the default themes. We have created our own css file, which we are specifying in "theme = ". Any workaround for this?

Regards, Manali

On Fri, May 29, 2015 at 12:17 AM, Brian Waismeyer notifications@github.com wrote:

Update Verified that it's not just the particular theme I'm applying to my code. It seems to have to do with using a custom CSS file.

If I download the CSS file for "united" https://bootswatch.com/united/ (one of the RStudio default themes) and use theme to point to that CSS, I get the modal-grayed-out error.

If I use shinythemes to set the same theme (shinythemes("united")), I don't get the error.

— Reply to this email directly or view it on GitHub https://github.com/ebailey78/shinyBS/issues/36#issuecomment-106625097.

[bwaismeyer]

Hmm. I'm not sure about a fix, but it does seem to have something to do with the ".css" file itself and not with how the file is loaded.

For instance, if you take my example code above and try various themes you get the following results:

• loading a custom CSS theme with theme: modal is problematic (specifically used this theme - tried both the bootstrap.css and bootstrap.min.css variants)
• loading the available themes with shinytheme: modal works just fine
• loading the bootstrap.min.css files that came with shinythemes manually using theme: modal works just fine (e.g., I tested the "united" theme)
• loading the bootswatch.com version of the ".min.css" files that came with shinythemes manually using theme: modal is problematic (this is especially interesting because RStudio says the themes are from bootswatch.com)

In other words, it so happens that the particular CSS files that come with shinythemes are not problematic.

Will try to compare the shinythemes "united" file against the original bootswatch.com version to see if I can figure out what's up, but we may need to wait to hear back from the nifty shinyBS author as my CSS is weak.

[bwaismeyer]

So, here's a quick-and-dirty view of the differences between a non-problematic ".css" file (here, the "united.min.css" file that came with shinythemes) and a problematic variant of the same theme (the "bootstrap.min.css" file provided for the "united" theme by bootswatch.com): https://www.diffchecker.com/ayigvroq

It looks like the bootswatch.com version has been updated in a number of places, but I have no idea which changes are relevant to the modal functionality.

[ijlyttle]

FWIW, my workaround has been to use one of the predefined themes, like "flatly", then to load my own css files afterward, on top of it.

Not optimal, but it works for me.

[bwaismeyer]

@ijlyttle: Hi Ian! How did you go about loading multiple CSS files with Shiny? I haven't been able to find any documentation walking through that. Would love to use that as a workaround here and for some more general cases.

[ijlyttle]

The way I do it is to create a new function to make a new custom template, but I think that it could also be done in the yaml. Following the Rmarkdown site, for a single css file (I'm guessing this is where you are):

---
title: "Habits"
output:
  html_document:
    theme: flatly
    highlight: null
    css: styles.css
---

For multiple files, I think this is the way:

---
title: "Habits"
output:
  html_document:
    theme: flatly
    highlight: null
    css: [
      styles_1.css,
      styles_2.css
    ]
---

Hope this helps!

[bwaismeyer]

@ijlyttle: Definitely helped and thank you! Sorry for the slow reply - rotated to another project for a bit.

[cather1ne]

Hi, I ran into the same problem. The fix I came across is to add the bootstrap.css theme and then add another CSS style file with the following:

Shiny code:

# Bootstrap theme Simplex: bootswatch.com
includeCSS("www/bootstrap.css"),

# CSS fixes
includeCSS("www/style.css"),

style.css:

/* Allows pop-up modal to not be greyed out*/ .modal-backdrop { z-index: 0; }

For whatever reason, z-index is set to 1040 which is causing the modal to be greyed out.

[Mrunalhshah]

@cather1ne Thank you for posting your solution. It helped me resolve the same issue. Only difference is, I didn't include the bootstrap.css and it still worked with the just the z-index entry in style.css.