时间戳

首页 > 解决方案 > 难以减少闪亮应用程序中元素之间的边距

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

问题描述

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

我尝试通过添加style = "margin:0px; padding:0px"到 UI 来设置 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)

浏览器中的空格： 在此处输入图像描述

标签： rshiny

解决方案

这里的问题不是边距或填充，而是宽度限制为 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)
  )
)

推荐阅读