难以减少闪亮应用程序中元素之间的边距答案

【问题标题】：trouble decreasing margin between elements in shiny app难以减少闪亮应用程序中元素之间的边距
【发布时间】：2021-05-10 17:53:42
【问题描述】：

我正在尝试减少这个闪亮应用程序上两个元素之间的边距。在浏览器中打开时，两者之间的空白是巨大的。

我尝试通过在 UI 中添加 style = "margin:0px; padding:0px" 来设置 css，但它没有帮助。我也试过弄乱inline = TRUE 设置，也没有帮助。


ui <- fluidPage(
  fluidRow(
    column(width = 3,
      htmlOutput("select1", inline = TRUE, style = "margin:0px; padding:0px")
    ),
    column(width = 3,
        htmlOutput("select2", inline = TRUE, style = "margin:0px; padding:0px")
    ),
    column(width = 6)
  )
)

server <- function(input, output, session) {
  output$select1 <- renderUI({
    pickerInput(
        inputId = "select1", 
        label = "LETTERS", 
        #choices = sort(unique(inventory$SubDivision)),
        choices = LETTERS,
        options = list(
            "actions-box" = TRUE, 
            size = 10,
            `live-search`=TRUE
        ), 
        multiple = TRUE
    )
  })
  output$select2 <- renderUI({
    pickerInput(
        inputId = "select2", 
        label = "letters", 
        #choices = sort(unique(inventory$SubDivision)),
        choices = letters,
        options = list(
            "actions-box" = TRUE, 
            size = 10,
            `live-search`=TRUE
        ), 
        multiple = TRUE
    )
  })
}
shinyApp(ui, server)

浏览器中的空格：

【问题讨论】：

标签： r shiny

【解决方案1】：

这里的问题不是边距或内边距，而是宽度限制为 300 像素。要让控件增长到整个列的大小，您可以更改全局样式：

ui <- fluidPage(
  fluidRow(
    tags$head(
      tags$style(HTML("
      .shiny-input-container:not(.shiny-input-container-inline) {
        width:100%;
      }"))
    ),
    column(width = 3,
           htmlOutput("select1", inline = TRUE)
    ),
    column(width = 3,
           htmlOutput("select2", inline = TRUE)
    ),
    column(width = 6)
  )
)

【讨论】：