CODEWITHSUNDEEP
rshinydashboard
Raul Torres Aragon
Raul Torres Aragon

Reputation: 187

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

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

Upvotes: 4

Views: 9715

Answers (2)

msoderstrom
msoderstrom

Reputation: 537

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%;")

Upvotes: 5

K. Rohde
K. Rohde

Reputation: 9676

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.

Upvotes: 2

Related Questions