CODEWITHSUNDEEP
rshinyshinydashboard
Dric
Dric

Reputation: 107

Tab customization with shinydashboard

I've been struggling for hours to try to do what should have been a very simple tab customization.

In the attached Shiny app, I'd like a selected tab to be highlighted in blue on its left, top and right sides, not only on the top side as done by default. To do so, I've added 2 customization chunks (tags$head(...) at the beginning of the app).

It is only partially successful as for some reason, the left side of the first sub-tab of a line is highlighted only if hovered (the very top tab, and other tabs on the same line do not have this issue). I want the left side to behave like the right side of tab, i.e. being highlighted all the time if the tab is selected, and not to depend on being hovered.

I've been looking for what's wrong with "Inspect element", but it did not bring any clue. I have no idea of what option I should look for (is there any place where I can find all possible options for tabs formatting, e.g. border-left-width ?), or what object is trigerring that annoying behavior. What can I do to correct this?

I have this issue on R 3.6.0 (I cannot update to R 4.x.x due to an issue with a package not used in this reprex), shinydashboard_0.7.2, shiny_1.7.1, RStudio 1.4.1717.

The attached app (the layout is weird for reasons that are not the focus here, I've also deleted some other custom chunks, which makes the app uglier, but allows to focus just on my tab issue):

library(shiny)
library(shinydashboard)

# Code for ui goes below --------------------------------------------------
ui <- dashboardPage(
    dashboardHeader(title = "Reprex"),
    dashboardSidebar(width = 350,
                     sidebarMenu(
                         id = "sidebarMenuID", menuItem("Results", tabName = "graphs", icon = icon("bar-chart"))
                     )),
    dashboardBody(
        # Tab Style: have top, left and right borders highlighted
        tags$head(
            tags$style(
                '.nav-tabs-custom .nav-tabs li.active a, .nav-tabs-custom .nav-tabs li.active:hover a {
      border-top-color: #3C8DBC;
      border-left-color: #3C8DBC;
      border-right-color: #3C8DBC;
      border-left-width: 5px;
      border-right-width: 5px;
    }'
            )
        ),
    
    tags$head(
        tags$style(
            '#site_nav li.active a, #site_nav li.active:hover a {
      border-top-color: #3C8DBC;
      border-left-color: #3C8DBC;
      border-right-color: #3C8DBC;
      border-top-width: 5px;
      border-left-width: 5px;
      border-right-width: 5px;
    }'
        )
    ),
    tabItems(tabItem(
        tabName = "graphs",
        tabsetPanel(id = "site_nav", #"site_tabs"
                    tabPanel("Tab 1",
                             fluidRow(
                                 tabBox(
                                     width = 12,
                                     height = NULL,
                                     tabPanel("Sub-tab 1",
                                              fluidRow(
                                                  tabBox(
                                                      width = 12,
                                                      height = NULL,
                                                      tabPanel("Sub-sub tab 1",
                                                               fluidRow(
                                                                   tabBox(
                                                                       width = 12,
                                                                       height = NULL,
                                                                       tabPanel("Sub-sub-sub tab 1",
                                                                                fluidRow(box(
                                                                                    title = "Some title",
                                                                                    width = 12
                                                                                )),
                                                                                fluidRow(box(
                                                                                    title = "Some title",
                                                                                    width = 12
                                                                                ))),
                                                                       tabPanel("Sub-sub-sub tab 2",
                                                                                fluidRow(box(
                                                                                    title = "Some title",
                                                                                    width = 12
                                                                                )),
                                                                                fluidRow(box(
                                                                                    title = "Some title",
                                                                                    width = 12
                                                                                )))
                                                                   )
                                                               )),
                                                      tabPanel("Sub-sub tab 2",
                                                               fluidRow(
                                                                   tabBox(
                                                                       width = 12,
                                                                       height = NULL,
                                                                       tabPanel("Sub-sub-sub tab 1",
                                                                                fluidRow(box(
                                                                                    title = "Some title",
                                                                                    width = 12
                                                                                )),
                                                                                fluidRow(box(
                                                                                    title = "Some title",
                                                                                    width = 12
                                                                                ))),
                                                                       tabPanel("Sub-sub-sub tab 2",
                                                                                fluidRow(box(
                                                                                    title = "Some title",
                                                                                    width = 12
                                                                                )),
                                                                                fluidRow(box(
                                                                                    title = "Some title",
                                                                                    width = 12
                                                                                )))
                                                                   )
                                                               ))
                                                  )
                                              )),
                                     tabPanel("Sub-tab 2",
                                              fluidRow(
                                                  box(
                                                      width = 12,
                                                      title = "Some title",
                                                      align = "centre",
                                                      background = "blue"
                                                  )
                                              ))
                                     
                                 )
                             )))
    ))
    )
)



####End of ui
# Server Code goes below --------------------------------------------------

server <- function(input, output, session) {
    
}

shinyApp(ui = ui, server = server)

Upvotes: 0

Views: 593

Answers (1)

dcruvolo
dcruvolo

Reputation: 669

You are almost there. I think there is a default class defined by shiny or Bootstrap that sets the left border to transparent. Add the css class .nav-tabs-custom .nav-tabs li:first-of-type.active a into your style definitions.

I've copied the tags$head statement below. I've condensed some of the style definitions using the shorthand properties. I hope you don't mind. :-) (You can probably combine both of the statements unless you want to customize the appearance even further.)

Hope that works!

tags$head(
    tags$style(
        "
        .nav-tabs-custom .nav-tabs li.active a,
        .nav-tabs-custom .nav-tabs li:first-of-type.active a,
        .nav-tabs-custom .nav-tabs li.active:hover a {
            border-color: #3C8DBC;
            border-bottom-color: none;
            border-width: 0 5px;
        }
        ",
        "
        #site_nav li.active a,
        #site_nav li.active:hover a {
            border-color: #3C8DBC;
            border-bottom-color: none;
            border-width: 0 5px;
        }
        "
    )
),

Upvotes: 1

Related Questions