how can I control the font size of an infobox in a shiny dashboard?

Question

I want to make the text in an info box smaller than the text on the rest of the dashboard. Here is the dashboardBody part of the code:

dashboardBody(fluidRow(        

      box(
         title = "Box 1",
         width = 12, solidHeader = TRUE,
         status = "primary",
         uiOutput("myUiOutput")
      ),
      box(
         title = "Box 2",
         width = 12,
         solidHeader = TRUE,
         status = "warning",
         plotOutput("myPlot")
      ),
      infoBox(title = "my info box title", 
              value = "my info box message",
              subtitle = NULL,
              icon = shiny::icon("copyright"), color = "black", width = 12,
              href = NULL, fill = FALSE) 
 )) #<-end dashboardBody

I tried adding this tag before the Box 1 code, but it did not work:

tags$head(tags$style(HTML('
    .info-box .logo {
    font-family: "Georgia", Times, "Times New Roman", serif;
    font-weight: bold;
    font-size: 8px;
  }
'))),

score 5 · Answer 1 · answered Jan 22 '17 at 14:58

5

An alternative solution is to set font-size as a percentage for cases when you don't know upfront what your current px size is, e.g.

 value = tags$p("my info box message", style = "font-size: 50%;")

answered Jan 22 '17 at 14:58

msoderstrom

537
1
7
14

score 2 · Answer 2 · answered Mar 14 '16 at 16:14

2

I agree, it's strange that css commands don't work. But try to write

value = tags$p(style = "font-size: 10px;", "my info box message")

instead of your value, to make it an inline style command.

answered Mar 14 '16 at 16:14

K. Rohde

9,439
1
31
51

how can I control the font size of an infobox in a shiny dashboard?

2 Answers2