Change position of icon in valueBox

Question

Suppose you have a simple valueBox() from the shinydashboard package:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(width = 12, 
             valueBoxOutput("box")
    )
  )
)
)

server <- function(input, output) {

  output$box<-renderValueBox(     

    valueBox(
      value = "ValueBox Title",
      subtitle = tagList("Some information about the box.",
                         p(""),
                         "Some more information about the box.",
                         p(""),
                         "Even more information about the box.",
                         shinyWidgets::progressBar(id = "test", value = 10, total = 10, display_pct = FALSE, striped = FALSE, status = "danger")
      ),
      icon = icon("user-check"),
      color = "green"
    ))

}

app<-shinyApp(ui = ui, server = server)
runApp(app, host="0.0.0.0",port=5050, launch.browser = TRUE)

I have added some extra information into the valueBox() like some extra subtitles and a progress bar. You'll notice, however, that the valueBox icon is aligned to the bottom right of the box, meaning that the progress bar (or other content) can get in the way of the icon. Is there a simple way to align valueBox icons to the top right of the box?

score 1 · Accepted Answer · answered Dec 11 '19 at 16:33

This can be done through CSS.

Add tags$head(tags$style(HTML('.small-box .icon-large {top: 5px;}'))) to the body and you should be good to go.

Full code:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(

    tags$head(tags$style(HTML('.small-box .icon-large {top: 5px;}'))),

    fluidRow(width = 12, 
             valueBoxOutput("box")
    )
  )
)
)

server <- function(input, output) {

  output$box<-renderValueBox(     

    valueBox(
      value = "ValueBox Title",
      subtitle = tagList("Some information about the box.",
                         p(""),
                         "Some more information about the box.",
                         p(""),
                         "Even more information about the box.",
                         shinyWidgets::progressBar(id = "test", value = 10, total = 10, display_pct = FALSE, striped = FALSE, status = "danger")
      ),
      icon = icon("user-check"),
      color = "green"
    ))

}

app<-shinyApp(ui = ui, server = server)
runApp(app, host="0.0.0.0",port=5050, launch.browser = TRUE)

Lovely, thanks very much @Kevin for your answer. Works as expected. — Simon, Dec 13 '19 at 08:49
This solution will change position of the icon for all valueBox right? Isn't it possible to decide the position of the icon within one specific valueBox() instead? — GDMN, Oct 05 '21 at 15:20

Change position of icon in valueBox

1 Answers1