rshinyshinydashboardbox

Add colored bar in the left side instead of the top of shinydashboard() box

Can I create a box() within shinydashboard which has the red bar in the left side instead of top? Like here:enter image description here

I took ideas from : here.

Maybe I can add it with an alternative way if there is no shinydashboard() built in solution.

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
box(
            title = "title, 
            closable = TRUE, 
            width = 10,
            status = "danger", 
            solidHeader = F, 
            collapsible = TRUE,
            collapsed = T
            )
)
)

server <- function(input, output) { }

shinyApp(ui, server)
Solution

  • You can change it with css

    .box.box-danger { border-top-color: white; border-left-color: red; border-left-style: solid; }

    ## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(
      type = 'text/css',
      ".box-danger{border-top-style: none; border-left-color: red; border-left-style: solid;}"
    ),
  box(
      title = "title", 
            closable = TRUE, 
            width = 10,
            status = "danger", 
            solidHeader = F, 
            collapsible = TRUE,
            collapsed = T
            )
)
)


server <- function(input, output) { }

shinyApp(ui, server)

    Sample