Tab Box CSS for Shinydashboard

Tab Box CSS for shinydashboard

Developper tools and "inspect element" are very handy to figure out which classes you to change the css from.

To change the sliver and the color of the selected tab, you could do:

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
background-color: transparent;
border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
border-top-color: #FFF;
}

Here's an example (backbone code from here):

library(shiny)
library(shinydashboard)
body <- dashboardBody(
fluidRow(tags$style(".nav-tabs {
background-color: #006747;
}

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
background-color: transparent;
border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
border-top-color: #FFF;
}"),
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")
)

))

shinyApp(
ui = dashboardPage(
dashboardHeader(title = "tabBoxes"),
dashboardSidebar(),
body
),
server = function(input, output) {
}
)

Tab customization with shinydashboard

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;
}
"
)
),

shiny tab Items shinydashboard

You have a typo calling menuItem function. The argument should be tabName, not tabname.

Working app:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
dashboardHeader(title = tags$a("Learning Objectives",href='http://pluralsight.com',tags$img(src='logo.png'),
tags$head( tags$link(rel="stylesheet",type="text/css",href="pluralsight-theme.css"))
)
),
dashboardSidebar(
sidebarMenu(
menuItem("Content Search", tabName="search",icon=icon("magnifying-glass")),
menuItem("Course Report",tabName="course",icon=icon("file-lines"))
)
),
dashboardBody(
tabItems(
tabItem(tabName = 'search', h2("hello there")),
tabItem(tabName = 'course',h2("hello there2"))
)
)
)

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

}

shinyApp(ui, server)

How to hide/remove tabBox grey borders in shiny R using CSS

You can set box-shadow: none; for class .nav-tabs-custom:

library(shiny)
library(shinydashboard)
body <- dashboardBody(
fluidRow(tags$style(".nav-tabs {
background-color: #006747;
}

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
background-color: transparent;
border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
border-top-color: #990d5e;
}

.content-wrapper {
background-color: #FFF;
}
.nav-tabs-custom {
box-shadow: none;
}
"),
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")
)

))

shinyApp(
ui = dashboardPage(
dashboardHeader(title = "tabBoxes"),
dashboardSidebar(),
body
),
server = function(input, output) {}
)

result

shinyDashboard; Maximizing tabBox with a sidebar will add a horizontal Scrollbar to the box?

I tried refining the css a bit


# Toggle a box sidebar
library(shiny)
library(bs4Dash)

shinyApp(
ui = dashboardPage(
header = dashboardHeader(),
body = dashboardBody(
tags$style(".card.maximized-card .card-body {overflow-x: hidden !important; }"),
box(
height = "500px",
width = 12,
maximizable = T,
solidHeader = FALSE,
collapsible = TRUE,
sidebar = boxSidebar(
id = "mycardsidebar",
width = 30,
p("Sidebar Content")
)
)
),
sidebar = dashboardSidebar()
),
server = function(input, output, session) {}
)

Change style of shinydashboard box with shinyjs

You are just missing useShinyjs() in the ui. Try this

library(shiny)
ui <- fluidPage(
useShinyjs(),
shinyWidgets::useShinydashboard(),
#tabBox( id = "mytab", width=6, title = "My Test Plot",
tabsetPanel(id = "mytab",
tabPanel("First", value="tab1",
shinydashboard::box(status = "primary",
title = "mybox",
solidHeader = TRUE, collapsible = TRUE,
sliderInput("orders", "Orders", min = 1, max = 2000, value = 650)
)),
tabPanel("Second", value="tab2", p("Second tab"),
shinydashboard::box(status = "warning",
title = "mybox",
solidHeader = TRUE, collapsible = TRUE,
sliderInput("orders2", "Orders", min = 1, max = 2000, value = 950)
))
)
)

server <- function(input, output) {
observeEvent(input$mytab,{
if (input$mytab=="tab1"){
shinyjs::runjs("$('.box-header').css('background', 'red');")
shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:red !important');")
} else if (input$mytab=="tab2"){
shinyjs::runjs("$('.box-header').css('background', 'blue');")
shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:blue !important');")
}

})
}
shinyApp(ui = ui, server = server)

Change colour and size of font in header of tabBox

The way to find things like this is to use the right-click menu item "Inspect element" (in Firefox, similar names in other browsers, but the built-in browser in RStudio isn't as good as the standalone ones). Click where the title should be and it will be highlighted, with lots of CSS properties shown in a panel on the right of the screen. Mine shows

screenshot

with the title highlighted in the main display. Starting at the top, look for properties that interest you. I see both font-size and color in the third group. It has a slightly confusing top line: the part saying AdminLTE.min.css:7 says where this definition was found, the rest .nav-tabs-custom > .nav-tabs > li.header is the selector that is active for this element.

So to change the size and color, use that selector, e.g. put this in your tabBox:

tags$head(tags$style(HTML('
/* tabBox background */
.nav-tabs-custom>.nav-tabs {
background-color: #2F4858;
}
.nav-tabs-custom > .nav-tabs > li.header {
font-size: 40px;
color: white;
}')


Related Topics



Leave a reply



Submit