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) {}
)
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
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
How to Render a Border to a Div Without Occupying Any Extra Space
How to Have a Progress Bar Move from Right to Left Based on a Negative Value in Twitter Bootstrap
Adding Background Image to Shiny Navbarpage
Why Is My Multi-Column Spacing Not Working in Chrome
Angular [Class.Active]="Isactive" - What Does "Class.Active" Mean Here
How to Use Calc() Inside Another Function
Sticky Scrollbar at Bottom of Table
Remove Border from All Primefaces P:Panelgrid Components
How to Make Body Background Image Transparent in CSS
How to Fix Inconsistent Rendering of Adjacent Td Borders When They Are Collapsed
Image Shifting/Jumping After CSS Transition Effect with Scale Transform in Firefox
How to Include a CSS Stylesheet in Orchard Module
CSS Grid: Grid-Row Not Working in Chrome Browser
CSS Style for Links Pointing to The Current Page
Unnoticeable Lesscss Compiler in Eclipse Pdt