Number not displaying inside circle created with CSS on shinydashboard - css

Question

I've created a circle with CSS that should contain a number in the middle, with the help of this SO answer
# Packages
library(shinydashboard)
library(tidyverse)
library(readxl)
library(scales)
theme_set(theme_light())
header <- dashboardHeader(
title = "Test App",
titleWidth = 215
)
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem("Test Tab", tabName = "test_tab",
icon = icon("paper-plane"), startExpanded = TRUE)
)
)
body <- dashboardBody(
includeCSS("www/style.css"),
tabItems(
tabItem(tabName = "test_tab",
fluidRow(
column(width = 4,
h2("Column X"),
valueBoxOutput("first_value", width = NULL),
box(flexdashboard::gaugeOutput("second_value", width = "90%", height = "100px"),
title = "Second Value", status = "primary", solidHeader = TRUE,
collapsible = FALSE, width = NULL
)
),
column(width = 8,
h2("Column Y"),
box(tags$div(id="insidediv", textOutput("test_div")),
title = "#3", status = "primary", solidHeader = TRUE,
collapsible = FALSE, width = 4
),
box(
title = "#4", status = "primary", solidHeader = TRUE,
collapsible = FALSE, width = 4
)
)
),
fluidRow(
h2("Row A"),
column(width = 12,
box(title = "Third Value", status = "primary", solidHeader = TRUE,
width = 2.4),
box("Fourth Value", status = "primary", solidHeader = TRUE,
width = 2.4),
box("Fifth Value", status = "primary", solidHeader = TRUE,
width = 2.4),
box("Sixth Value", status = "primary", solidHeader = TRUE,
width = 2.4),
box("Seventh Value", status = "primary", solidHeader = TRUE,
width = 2.4)
)
)
)
)
)
# Put them together into a dashboardPage
ui <- dashboardPage(skin = "blue", header = header,
sidebar = sidebar,
body = body)
server <- function(input, output) {
output$first_value <- renderValueBox({
valueBox(
comma_format()(100000),
subtitle = "First Value",
icon = icon("list"), color = "purple"
)
})
output$second_value = flexdashboard::renderGauge({
flexdashboard::gauge(0.12 * 100,
symbol = '%',
min = 0,
max = 100)
})
output$test_div <- renderText({
"141"
})
}
shinyApp(ui, server)
Unfortunately, the number doesn't appear inside the circle, but outside it... Does anyone know what the problem may be???
The linked SO answer seems to have it right, but under different circumstances... maybe since I'm putting it inside a box(), its different?

Answer 1

If you are not familiar with it:
The CSS # Selector is for giving ONE specific HTML Element a specific look. Shiny gives textOutput an ID which is test_div in your example. You also have to use that ID in your CSS to style the element.
#test_div {
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
font-weight: bold;
font-size: 24px;
}
I had to play around with the padding, which defines the space around the elements content. Instead of pixels you can also use % (padding: 5%)
https://www.w3schools.com/css/css_padding.asp
Learning the basics of CSS is quite easy and will improve your abitilies to make look shiny a lot :-).