如何减少 selectinput 中标签和选项之间的空间？答案

【问题标题】：How to reduce space between label and choices in selectinput?如何减少 selectinput 中标签和选项之间的空间？
【发布时间】：2020-01-07 22:29:11
【问题描述】：

我想删除/减少 Shiny 中选择输入的标签和选择选项之间的空间。我还想减少两个不同的选择输入之间的空间。

我尝试将 selectinputs 包装为 div 样式并将边距和填充设置为 0。这没有任何效果，但我可能做错了。请参阅下面的代码。

ui <- fluidPage(
  theme = shinytheme("sandstone"),
  sidebarLayout(
    sidebarPanel(
      div(style = "font-size:12px; margin: 0px; padding: 0px",
        selectInput(
            "select1", 
            label = h5("Selection 1"),
            choices = c("a", "b", "c"), 
            selectize = TRUE
          ),
          selectInput(
            "select2", 
            label = h5("Selection 2"),
            choices = c("a", "b", "c"), 
            selectize = TRUE
          )
      )
    ),
    mainPanel(
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

【问题讨论】：

div(tags$style(".shiny-input-container {height : 12px}"),[...] 可能会让您离目标更近一步。我不能 100% 确定如何定位您想要的元素，因此您可以尝试更改 .shiny-input-container。

标签： r shiny selectinput

【解决方案1】：

要减少标签和下拉列表之间的空间，请使用以下 CSS：

.shiny-input-container > label {margin-bottom: -15px;}

要减少两个选择输入之间的空间，您可以在它们之间插入一个div，其样式为负margin-top。

library(shiny)
library(shinythemes)

css <- "
.shiny-input-container > label {margin-bottom: -15px;}"

ui <- fluidPage(
  theme = shinytheme("sandstone"),
  tags$head(
    tags$style(HTML(css))
  ),
  sidebarLayout(
    sidebarPanel(
      selectInput(
        "select1", 
        label = h5("Selection 1"),
        choices = c("a", "b", "c"), 
        selectize = TRUE
      ),

      div(style = "margin-top:-15px"),

      selectInput(
        "select2", 
        label = h5("Selection 2"),
        choices = c("a", "b", "c"), 
        selectize = TRUE
      )
    ),
    mainPanel(
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

【讨论】：

【解决方案2】：

这里是关于 Shiny - change the size (padding?) of dropdown menu (select tags) smaller

【讨论】：

这样的答案应该作为评论发布。