Giter VIP home page Giter VIP logo

Comments (11)

bwaismeyer avatar bwaismeyer commented on August 22, 2024

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"})
    }
)

from shinybs.

bwaismeyer avatar bwaismeyer commented on August 22, 2024

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.

from shinybs.

manalikr avatar manalikr commented on August 22, 2024

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 [email protected]
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
#36 (comment).

from shinybs.

bwaismeyer avatar bwaismeyer commented on August 22, 2024

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.

from shinybs.

bwaismeyer avatar bwaismeyer commented on August 22, 2024

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.

from shinybs.

ijlyttle avatar ijlyttle commented on August 22, 2024

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.

from shinybs.

bwaismeyer avatar bwaismeyer commented on August 22, 2024

@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.

from shinybs.

ijlyttle avatar ijlyttle commented on August 22, 2024

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!

from shinybs.

bwaismeyer avatar bwaismeyer commented on August 22, 2024

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

from shinybs.

cather1ne avatar cather1ne commented on August 22, 2024

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.

from shinybs.

Mrunalhshah avatar Mrunalhshah commented on August 22, 2024

@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.

from shinybs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.