如何在 R Shiny 中对齐一组 checkboxGroupInput答案

【问题标题】：How to align a group of checkboxGroupInput in R Shiny如何在 R Shiny 中对齐一组 checkboxGroupInput
【发布时间】：2020-03-23 02:21:25
【问题描述】：

我使用下面的代码创建了一组checkboxGroupInput，但它没有正确显示。它看起来像这样：

知道如何在 Shiny 中强制正确对齐吗？

ui.R

uiOutput(outputId = "numSelector")

服务器.R

        output$numSelector <- renderUI({
        out <- checkboxGroupInput(
            inputId = "numSelector",
            label   = "Select the numbers to filter on:",
            choices = selectRange(input$dataName),
            inline = TRUE
        )
        return(out)
    })

【问题讨论】：

标签： r shiny

【解决方案1】：

可以通过调整div标签来解决这个问题。一个用于说明的小示例闪亮应用程序：

library(shiny)

# tweaks, a list object to set up multicols for checkboxGroupInput
tweaks <- 
  list(tags$head(tags$style(HTML("
                                 .multicol { 
                                   height: 150px;
                                   -webkit-column-count: 5; /* Chrome, Safari, Opera */ 
                                   -moz-column-count: 5;    /* Firefox */ 
                                   column-count: 5; 
                                   -moz-column-fill: auto;
                                   -column-fill: auto;
                                 } 
                                 ")) 
                                 ))

# values to show, or not show, these will be the 'choices' and 'selected' values
# for the checkboxGroupInput()
all_rows <- 1:25
names(all_rows) <- paste("Row", all_rows)

# data control: the checkboxes will control the data values plotted
controls <-
  list(h3("Multicolumn checkboxGroupInput"), 
       tags$div(align = 'left', 
                class = 'multicol', 
                checkboxGroupInput(inputId  = 'numSelector', 
                                   label    = "Select the numbers:", 
                                   choices  = all_rows,
                                   selected = all_rows,
                                   inline   = FALSE))) 

# run the app
runApp(list(
            ui = fluidPage(tweaks,
                           fluidRow(column(width = 4, controls),
                                    column(width = 8, plotOutput("plot")))),
            server = function(input, output) { 
              plot_data <- reactive(input$numSelector)

              output$plot <- renderPlot(plot(x = plot_data(), 
                                             y = plot_data(), 
                                             pch = 6, 
                                             cex = 2, 
                                             xlim = c(1, 25), 
                                             ylim = c(1, 25)))
            }))

checkboxGroupInput 看起来像这样：

我将此解决方案与帮助表单一起拼凑而成：CSS-Tricks 和 This Google Groups 发布。

【讨论】：

是否有可能第一行只有标签而没有任何复选框，并且复选框将从第二行开始对齐？

【解决方案2】：

我知道这篇文章很古老，但是... 受彼得回答的启发，我深入研究并修复它以调整现有的 checkboxGroupInput。组的标签仍然在我输入的组上方，其余布局相同。

将此添加到您的用户界面中的某处。对我来说，这是边栏中 tagList() 的成员（只是为了将代码保持在一起），但它应该可以在任何地方工作（只要它在 tagList() 中，或者我猜它是否是唯一的元素）。

tags$head(
    tags$style(
      HTML(
        ".checkbox-inline { 
                    margin-left: 0px;
                    margin-right: 10px;
          }
         .checkbox-inline+.checkbox-inline {
                    margin-left: 0px;
                    margin-right: 10px;
          }
        "
      )
    ) 
  )

【讨论】：

【解决方案3】：

另一个简单的解决方案是使用shinyWidgets package（它有更多的样式选择）和prettyCheckbox，这将使所有复选框在左边缘对齐，尽管各个复选框没有对齐——您可能必须使用css和如果你真的需要，上面的解决方案。另一方面，使用 css 您必须指定列数，并且它们不会按窗口大小动态换行。

【讨论】：

此解决方案不会创建均匀间隔的列。
是的。但是，对于 css 指定的列，您不能使用调整大小动态包装它们。首选哪一个将取决于用例。我有点把这个问题与另一个没有好的答案的类似问题混淆了。如果您希望所有复选框对齐，我同意上面的 css 解决方案是一个很好的解决方案。我编辑了文本以澄清它。