Remove shaded background and border of indicators in shinydashboardPlus::carousel

Question

I'm using {shinydashboard} and {shinydashboardPlus} to display a carousel. When I click on the carousel indicators they are displayed with a shaded background and a blue border (this wasn't the case in an earlier version of shinydashboardPlus::carousel, I added the used package versions in the code below). I checked this in Firefox and EDGE Chromium. I want to remove both (box and border) and can't figure out how to tweek the CSS. I did already manage to hide the .carousel-caption, but after playing around some time with the DOM inspector, I've not managed to do the same for the small box around the carousel indicators.

My problem is to identify the class of the object that has the shaded background and the blue border as attributes. Once I figure that out, it should be easy to change it.

Any help appreciated.

# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3

shinyApp(ui = dashboardPage(

  title = "Test",
  
  header  = dashboardHeader(),
  
  sidebar = dashboardSidebar(disable = TRUE,
                             width = "0px",
                             collapsed = TRUE),
  
  body = dashboardBody(
    
    tags$head(
      tags$style(HTML("
      .carousel-caption {
        display: none !important;      
      }
      "))
    ),
    
    carousel(
      id = "mycarousel",
      carouselItem(
        caption = "Item 1",
        tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
      ),
      carouselItem(
        caption = "Item 2",
        tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
      )
    )
    ) # close dashboardBody
  ), # close dashboardPage 
server = function(input, output) {}
)

https://stackoverflow.com/questions/69089123/how-to-change-outline-color-of-a-collapsable-box-shiny — neuron, Sep 20 '21 at 14:31
There is part of the answer to that question where you can change the background of an icon. Not sure about the blue box though — neuron, Sep 20 '21 at 14:34
@neuron: Thanks for the reference above. I'm not sure if that answer can be applied to my question, since the indicators are not really an icon, and the box is only shown when clicked. My problem is to identify the class of the object that has the shaded background and the border as attributes. Once I figure that out, it should be easy to change it. — TimTeaFan, Sep 20 '21 at 15:09
@neuron: The code above in my post should prodce the screenshot, if you click on one of the indicators. Is it not reproducible? — TimTeaFan, Sep 20 '21 at 15:22
The code above does not produce the example picture you posted — neuron, Sep 20 '21 at 15:23
@ That's good to know, I'll add the package versions I'm using. — TimTeaFan, Sep 20 '21 at 15:40

score 3 · Accepted Answer · answered Sep 23 '21 at 21:38

This is due to the accessibility plugin from bootstrap that the shiny people decided to add in since 1.6. There was no problem before. This is annoying. I tried to ask them to have an option choose load or not to load this plugin on start, but they refused. You can read from this issue.

To fix your problems, I have added some CSS styles:

# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3

shinyApp(ui = dashboardPage(
  title = "Test",
  header  = dashboardHeader(),
  sidebar = dashboardSidebar(disable = TRUE,
                             width = "0px",
                             collapsed = TRUE),
  
  body = dashboardBody(
    
    tags$head(
      tags$style(HTML("
      .carousel-caption {
        display: none !important;      
      }
      a.carousel-control:focus {
        outline: none;
        /*change background-image to none if want to remove black bars on right*/
        background-image: linear-gradient(to right, transparent 0px, rgba(0,0,0,0.5) 100%);;
        box-shadow: none;
      } 
      a.carousel-control.left:focus {
        /*change background-image to none if want to remove black bars on left*/
          background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
      }
      .carousel-tablist-highlight.focus {
        outline: none;
        background-color: transparent;
      }
      "))
    ),
    carousel(
      id = "mycarousel",
      carouselItem(
        caption = "Item 1",
        tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
      ),
      carouselItem(
        caption = "Item 2",
        tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
      )
    )
  ) # close dashboardBody
), # close dashboardPage 
server = function(input, output) {}
)

The first rule was added by you. The second and third rules are to remove the ugly box when you click left and right bar, but I didn't remove the black shadows around. You can remove them following the instructions I leave as comments. The last rule is what you really want. Only leave the last one if you don't care about left and right bars.

Thanks for figuring this out. I wasn't able to find those attributes in the DOM inspector. An option to turn the accessibility plugin from bootstrap on/off would be great. I will reward the bounty asap, which is in 12 hours. — TimTeaFan, Sep 23 '21 at 21:48
took me a while to figure out the correct DOM node too. They didn't do the highlighting in the `li` if you direct inspect but have a special node ` — lz100, Sep 23 '21 at 21:52

Remove shaded background and border of indicators in shinydashboardPlus::carousel

1 Answers1