rshinyshinydashboard
Change color of selected tab in shinydashboard tabBox
Is there a way to change the color that indicates the active tab of a shinydashboard tabBox? I have changed the "skin" of the dashboard to "red". While this affects the highlighted active tab of the sidebar, it does not seem to have an effect regarding the selected tab in a tabBox.
I have only found solutions for changing the acutal background color of a selected tab (e.g., Shinydashboard - Change background based on selected tab), however, I could not find anything regarding the little line on top of a selected tab in a tabBox. In my examples, the selected tabs (Tab1, Tab3, Tab1) should have a red indicator instead of the blue one the have now.
library(shiny)
library(shinydashboard)
#>
#> Attaching package: 'shinydashboard'
#> The following object is masked from 'package:graphics':
#>
#> box
body <- dashboardBody(
fluidRow(
tabBox(
title = "First tabBox",
# The id lets us use input$tabset1 on the server to find the current tab
id = "tabset1", height = "250px",
tabPanel("Tab1", "First tab content"),
tabPanel("Tab2", "Tab content 2")
),
tabBox(
side = "right", height = "250px",
selected = "Tab3",
tabPanel("Tab1", "Tab content 1"),
tabPanel("Tab2", "Tab content 2"),
tabPanel("Tab3", "Note that when side=right, the tab order is reversed.")
)
),
fluidRow(
tabBox(
# Title can include an icon
title = tagList(shiny::icon("gear"), "tabBox status"),
tabPanel("Tab1",
"Currently selected tab from first box:",
verbatimTextOutput("tabset1Selected")
),
tabPanel("Tab2", "Tab content 2")
)
)
)
shinyApp(
ui = dashboardPage(dashboardHeader(title = "tabBoxes"), skin = "red", dashboardSidebar(), body),
server = function(input, output) {
# The currently selected tab from the first box
output$tabset1Selected <- renderText({
input$tabset1
})
}
)
#>
#> Listening on http://127.0.0.1:7512
Created on 2019-10-18 by the reprex package (v0.3.0)
devtools::session_info()
#> - Session info ----------------------------------------------------------
#> setting value
#> version R version 3.6.1 (2019-07-05)
#> os Windows 10 x64
#> system x86_64, mingw32
#> ui RTerm
#> language (EN)
#> collate German_Germany.1252
#> ctype German_Germany.1252
#> tz Europe/Berlin
#> date 2019-10-18
#>
#> - Packages --------------------------------------------------------------
#> package * version date lib source
#> assertthat 0.2.1 2019-03-21 [1] CRAN (R 3.5.3)
#> backports 1.1.4 2019-04-10 [1] CRAN (R 3.5.3)
#> callr 3.3.2 2019-09-22 [1] CRAN (R 3.5.3)
#> cli 1.1.0 2019-03-19 [1] CRAN (R 3.5.3)
#> crayon 1.3.4 2017-09-16 [1] CRAN (R 3.4.2)
#> curl 4.1 2019-09-16 [1] CRAN (R 3.5.3)
#> desc 1.2.0 2018-05-01 [1] CRAN (R 3.5.1)
#> devtools 2.2.1 2019-09-24 [1] CRAN (R 3.5.1)
#> digest 0.6.21 2019-09-20 [1] CRAN (R 3.5.3)
#> ellipsis 0.3.0 2019-09-20 [1] CRAN (R 3.5.3)
#> evaluate 0.14 2019-05-28 [1] CRAN (R 3.5.3)
#> fs 1.3.1 2019-05-06 [1] CRAN (R 3.5.3)
#> glue 1.3.1 2019-03-12 [1] CRAN (R 3.5.3)
#> highr 0.8 2019-03-20 [1] CRAN (R 3.5.3)
#> htmltools 0.3.6 2017-04-28 [1] CRAN (R 3.5.1)
#> httpuv 1.5.2 2019-09-11 [1] CRAN (R 3.5.3)
#> httr 1.4.1 2019-08-05 [1] CRAN (R 3.5.3)
#> jsonlite 1.6 2018-12-07 [1] CRAN (R 3.5.2)
#> knitr 1.25 2019-09-18 [1] CRAN (R 3.5.3)
#> later 0.8.0 2019-02-11 [1] CRAN (R 3.5.3)
#> magrittr 1.5 2014-11-22 [1] CRAN (R 3.4.1)
#> memoise 1.1.0 2017-04-21 [1] CRAN (R 3.4.1)
#> mime 0.7 2019-06-11 [1] CRAN (R 3.5.3)
#> pkgbuild 1.0.5 2019-08-26 [1] CRAN (R 3.5.3)
#> pkgload 1.0.2 2018-10-29 [1] CRAN (R 3.5.1)
#> prettyunits 1.0.2 2015-07-13 [1] CRAN (R 3.5.1)
#> processx 3.4.1 2019-07-18 [1] CRAN (R 3.5.3)
#> promises 1.0.1 2018-04-13 [1] CRAN (R 3.5.1)
#> ps 1.3.0 2018-12-21 [1] CRAN (R 3.5.2)
#> R6 2.4.0 2019-02-14 [1] CRAN (R 3.5.3)
#> Rcpp 1.0.2 2019-07-25 [1] CRAN (R 3.5.3)
#> remotes 2.1.0 2019-06-24 [1] CRAN (R 3.5.3)
#> rlang 0.4.0 2019-06-25 [1] CRAN (R 3.5.3)
#> rmarkdown 1.15 2019-08-21 [1] CRAN (R 3.5.3)
#> rprojroot 1.3-2 2018-01-03 [1] CRAN (R 3.5.1)
#> sessioninfo 1.1.1 2018-11-05 [1] CRAN (R 3.5.3)
#> shiny * 1.3.2 2019-04-22 [1] CRAN (R 3.5.3)
#> shinydashboard * 0.7.1 2018-10-17 [1] CRAN (R 3.5.2)
#> stringi 1.4.3 2019-03-12 [1] CRAN (R 3.5.3)
#> stringr 1.4.0 2019-02-10 [1] CRAN (R 3.5.2)
#> testthat 2.2.1 2019-07-25 [1] CRAN (R 3.5.3)
#> usethis 1.5.1 2019-07-04 [1] CRAN (R 3.5.3)
#> webshot 0.5.1 2018-09-28 [1] CRAN (R 3.5.1)
#> withr 2.1.2 2018-03-15 [1] CRAN (R 3.5.1)
#> xfun 0.9 2019-08-21 [1] CRAN (R 3.5.3)
#> xml2 1.2.2 2019-08-09 [1] CRAN (R 3.5.3)
#> xtable 1.8-4 2019-04-21 [1] CRAN (R 3.5.3)
#> yaml 2.2.0 2018-07-25 [1] CRAN (R 3.5.1)
#>
#> [1] E:/R_LIBS_USER
#> [2] E:/R-3.6.1/library
Solution
You can apply custom css this. The red color used in skin = "red" is #d73925
library(shiny)
library(shinydashboard)
js <- '.nav-tabs-custom .nav-tabs li.active {
border-top-color: #d73925;
}"'
body <- dashboardBody(
tags$style(js),
fluidRow(
tabBox(
title = "First tabBox",
# The id lets us use input$tabset1 on the server to find the current tab
id = "tabset1", height = "250px",
tabPanel("Tab1", "First tab content"),
tabPanel("Tab2", "Tab content 2")
),
tabBox(
side = "right", height = "250px",
selected = "Tab3",
tabPanel("Tab1", "Tab content 1"),
tabPanel("Tab2", "Tab content 2"),
tabPanel("Tab3", "Note that when side=right, the tab order is reversed.")
)
),
fluidRow(
tabBox(
# Title can include an icon
title = tagList(shiny::icon("gear"), "tabBox status"),
tabPanel("Tab1",
"Currently selected tab from first box:",
verbatimTextOutput("tabset1Selected")
),
tabPanel("Tab2", "Tab content 2")
)
)
)
shinyApp(
ui = dashboardPage(dashboardHeader(title = "tabBoxes"), skin = "red", dashboardSidebar(), body),
server = function(input, output) {
# The currently selected tab from the first box
output$tabset1Selected <- renderText({
input$tabset1
})
}
)
- Generating Dropdown menu for Plotly charts
- Sum column of rows below which meet a certain criteria
- Importing Excel-tables in R
- Rasterizing a grid of points causes empty raster cells and misalignement between points and raster cells
- R Binance API HMAC SHA256 signed message
- When scaling the plot of ggplot2 the textsize of geom_text() stays the same instead of scaling too
- Can I use geom_text or similar to add group by sum rather than amending original data frame?
- Convert curl code into R via the RCurl package?
- Plotting terra raster with white color set for 0 values
- Color perfect correlation tiles in correlation matrix with ggplot
- Swapping strings or values in grouped data based on condition
- Sum and product over interval in R
- Word cloud comparison for two lists of words
- Turn `magick` object into raw vector
- Should memfrac in terra be adjusted for the number of workers in parallel?
- R parallel inside of function
- Regex pattern to include string while excuding other patterns
- CORS Error when using .page.js, but not .page.server.js to fetch external csv ressource with SvelteKit
- Is there a way to automate generating a table with dplyr?
- Using .keep and .before in dplyr::mutate() While Overwriting a Column Name with the same Name
- Why does converting "year + week number + weekday number" always return January 25 for all weeks and weekdays when using %V?
- Fix legend when using ifelse color fill with ggplot
- ghostscript stubbornly refuses to embed fonts
- Adding leading zeros in the character and numeric mixed column names in R
- marginaleffects::predictions returning closure error
- Fill a column's blank spaces contingent on a second column in R
- Rename function simultaneously in R
- Path diagram in r
- How to calculate the gradient of an n-dimensional array of data in R
- How do I add an alias for magrittr pipe from R in vscode