Comments (11)
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.
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.
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.
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 usingtheme
: 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 usingtheme
: 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.
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.
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.
@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.
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.
@ijlyttle: Definitely helped and thank you! Sorry for the slow reply - rotated to another project for a bit.
from shinybs.
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.
@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)
- FR: Allow for adding popovers/tootips to arbitrary elements
- Info button refreshing the page when clicked on
- bsTooltip not working (i.e. no hover tooltip shown) when referencing ID of UI module HOT 1
- Fast clicks can cause issues with bsModal
- Jquery error Uncaught Error: Syntax error, unrecognized expression: # HOT 2
- Mt app is frozen when close two opened modals
- FR: Allow updating additional attributes in `updatePanel`
- FR: Allow specification of id tag in bsCollapsePanel
- FR: Add 'multiple' parameter to `collapseUpdate`
- Uncaught referenceErrorL ShinyBS is not defined at ..... HOT 4
- Soft wrap long text in bsCollapsePanel()
- Is someone taking over support of this package?
- Change the way shinyBS adds resource path HOT 1
- modal is not working in ioslides_presentation
- Tooltips does not show up with shinyDashboard boxes sidebar
- bsModal works with shinydashboard but not when tabItems / tabItem are utilized HOT 2
- Dependencies failed to load HOT 1
- Alternatives to shinyBS HOT 2
- bsPopover (tooltip) not working in shinyapps.io
- feature request, load function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shinybs.