-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slider handle is in wrong location when used with Quarto #3905
Comments
Are you bringing the slider in via PyShiny (a reprex would be great)? |
Right, the slider is coming in from Shiny for Python. Sorry, I don't have a simple reprex at this point, since generating the output currently involves some things that are experimental. I also tried reproducing with Quarto and Shiny for R, but I couldn't figure out how to get it to display sliders with the updated look (with no tick marks). If you can get Quarto and Shiny for R to display the new sliders, I suspect they will look the same. |
I'm not sure if this is exactly the same issue, but it seems like it's probably related: rstudio/bslib#813 |
@wch I suspect the issue is fundamentally the same for Python and R -- the static, precompiled CSS for ionrangeslider not using the Sass variables of the new shiny preset -- but the fix will likely be different. In the case of Shiny for Python, I'm not sure how ionrangeslider's CSS dependency is handled, but I suspect the fix will be to re-compile that CSS in the shiny preset context. |
I think we should move this issue into the py-shiny repo (or close it in favor of a new issue); on the R side the work needed is covered by the bslib issue. |
What's additionally confusing is that these In Shiny for Python, the At this point, I think it'd be worth the effort to put together a reprex. |
I'd really really like us to move away from this model (that I invented, IIRC?) where the sass rules are layered in, and instead have everything that builds on top of Bootstrap use CSS variables exclusively. How far do you think we are from that reality? Until we do that, we'll never having theming in Shiny for Python, and Quarto will always act weird like this when we put our components in it. |
We're not that far off, and we've made significant strides recently with the bslib components.
I doubt this alone would be sufficient for solving the core issue here, which as @wch pointed out, seems to be related to how Quarto is managing Bootstrap. After discussing with Charles today, we talked about some of these issues, and at least for now, I'll be sending them a PR so that Quarto can better simulate bslib, which may end up fixing this issue. Longer term, it would be great to eliminate Quarto's build-time step of copying over bslib's Sass code. I don't know if this is realistic, but I'm thinking Quarto could maybe do something like |
After researching how py-shiny handles the ionRangSlider dependency, I have a much clearer understanding of this issue. py-shiny pre-renders the static So one possibility, for py-shiny at least, would be to include those rules in the pre-compiled Unfortunately, CSS variables wouldn't completely save us from this problem (even though I agree we should move in that direction with our existing components too), because we're missing an entire small stylesheet. I do think we should at least open a py-shiny specific issue since the dynamics of the situation are different in Python and R and will need different fixes (unless we decide to make Bootstrap 5 and the Shiny preset the de facto default Shiny app look). |
Closing in favor of posit-dev/py-shiny#748 |
When using the
sliderInput
with a different build of Bootstrap (compared to the bootstrap.css in bslib), the slider looks like this:This is because the CSS for the handle position is in bslib's copy of bootstrap.css:
This happens when using the slider in a Quarto document.
To fix this, I think the slider styling in bslib somehow needs to be put into Shiny.
The text was updated successfully, but these errors were encountered: