css - 在 shinydashboard 上使用 CSS 创建的圆圈内不显示数字

Question

在 SO answer 的帮助下，我用 CSS 创建了一个圆圈，中间应该包含一个数字。

# 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)

不幸的是，数字没有出现在圆圈内，而是出现在圆圈外......有谁知道可能是什么问题？？？

链接的 SO 答案似乎是正确的，但在不同的情况下......也许因为我把它放在一个 box() 中，所以它有所不同？

Answer 1

如果你不熟悉它:

CSS # 选择器用于为一个特定的 HTML 元素赋予特定的外观。 Shiny 为 textOutput 提供了一个 ID，在您的示例中为 test_div。您还必须在 CSS 中使用该 ID 来设置元素的样式。

#test_div {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}

我不得不尝试使用填充来定义元素内容周围的空间。除了像素，您还可以使用 % (padding: 5%)

https://www.w3schools.com/css/css_padding.asp

学习 CSS 的基础知识非常容易，并且会提高您使外观 Shiny 的能力:-)。