-2

I am using the color code of #B61E2E across my shiny app. As shown in the image below, however, my color of interset is not reflected in the play button under the slider. The color for the play button should be as same as download tabs, but it is grayed out and is not consistent with tabs. Thanks, Nader

enter image description here

                   playButton = tags$button("Play", style =
                                          "background-color: #B61E2E !important ; color:white; margin-top: 10px; border:solid"),
               pauseButton = tags$button("Pause", style =
                                           "background-color: #B61E2E !important; color:white; margin-top: 10px; border:solid")
Nader Mehri
  • 514
  • 1
  • 5
  • 21
  • 1
    It looks like your play button is probably disabled. It would be easier to help you with a [reproducible example](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example) where we could run and test the code to see what's happening. – MrFlick Aug 10 '20 at 23:48
  • Thanks for your comments. It is not disabled! It works perfectly! The only problem is its color. It has to be the same color as the download button. I am using the same color code for both of the play button and download buttons. But I get different colors for each! – Nader Mehri Aug 10 '20 at 23:51
  • I would use your browser's developer tools to see which CSS styles are being applied. Surely there are rules interacting somewhere. It's impossible to say what might be going on without a reproducible example. – MrFlick Aug 10 '20 at 23:56
  • Thanks but the entire shiny includes 3000 lines of codes! – Nader Mehri Aug 11 '20 at 00:01
  • 1
    Well, start a new project. Only add in essential lines to reproduce the problem. Once you get a minimal example then you can share it. Since this only seems to be in the UI layer, there's no real need to share any server code (unless there are parts that are required to reproduce the problem). I'm not sure what else we can do for you. Basically we just have to guess unless we have something to test with. – MrFlick Aug 11 '20 at 00:04
  • 1
    @ Nader Mehri > I don't see any problem with the 3000 lines of code. To explore the HTML element it suffices to right-click on the button and to choose "Inspect element" in the menu. Then the browser's inspector tools targets the button. That's how I found the cause of the issue, using a minimal example of an app with a slider and a play button. – Stéphane Laurent Aug 11 '20 at 00:25

1 Answers1

3

That's because the CSS class slider-animate-button has the property opacity: 0.5 defined in shiny.css. Set the opacity property to 1 with this CSS (to include in your UI):

  tags$head(tags$style(HTML(".slider-animate-button {opacity: 1;}")))
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
  • Thanks; you made my life easier. Out of curiosity; why it is not set to 1 by default. I have a background in social sciences, not computer sciences, but setting it to 1 makes more sense. – Nader Mehri Aug 11 '20 at 14:05