r - 如何减小 Shiny 中的侧边栏面板文本大小？

Question

如何减小 Shiny 应用程序中的文本大小和 selectInput 框大小？

现在，我有四个 selectInput 框和相应的标题，它们非常大。我希望包含最多 16 个，但尺寸较小。我包含了 Shiny 教程中的示例 ui.R。感谢您的帮助!

更新:我使用 tags$style 行更新了以下代码。这使得文本变小。现在，我不知道如何使 selectInput 框变小。

shinyUI(fluidPage(
  titlePanel("censusVis"),

  sidebarLayout(
    sidebarPanel(
      helpText("Create demographic maps with 
        information from the 2010 US Census."),
      tags$style(type='text/css', ".selectize-input { font-size: 10px; line-height: 10px;} .selectize-dropdown { font-size: 10px; line-height: 10px; }")
      selectInput("var", 
        label = "Choose a variable to display",
        choices = c("Percent White", "Percent Black",
          "Percent Hispanic", "Percent Asian"),
        selected = "Percent White"),

      sliderInput("range", 
        label = "Range of interest:",
        min = 0, max = 100, value = c(0, 100))
    ),

    mainPanel(
      textOutput("text1")
    )
  )
))

Answer 1

要减小字体大小，只需在文档标题中添加一些 CSS，针对 "selectize-input" 和 "selectize-dropdown" 类的元素。 (这些分别影响选择栏及其下拉菜单中显示的字体大小。)

要减小控件的宽度，您可以将其包装在 fluidRow() 中，并为其分配该行包含的 12 列的一部分。

这是一个完全可重现的示例，您只需将其复制并粘贴到 R 中即可运行:

library(shiny)

shinyApp(
    ui = fluidPage(
        tags$head(tags$style(HTML("
        .selectize-input, .selectize-dropdown {
          font-size: 75%;
        }
        "))),    
        titlePanel("censusVis"),
        sidebarLayout(
            sidebarPanel(
                helpText("Create demographic maps with
        information from the 2010 US Census."),    
                fluidRow(column(6,
                       selectInput("var",
                            label = "Choose a variable to display",
                            choices = c("Percent White", "Percent Black",
                                "Percent Hispanic", "Percent Asian"),
                            selected = "Percent White")
                )),
                sliderInput("range",
                            label = "Range of interest:",
                            min = 0, max = 100, value = c(0, 100))
                ),
            mainPanel(textOutput("text1"))
        )
    ),
    server = function(input, output) {}
)