如何在R Shiny中对齐一组checkboxGroupInput

Question

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

任何想法如何强制在Shiny中正确对齐？

ui.R

uiOutput(outputId = "numSelector")

server.R

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

Answer 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和此Google网上论坛帖子.

Answer 2

我知道这篇文章是古老的,但是...受到Peter的回答的启发,我挖出并修复它只是调整现有的checkboxGroupInput.该组的标签仍然以我的输入位于组上方,其余布局是相同的.

在你的ui中添加这个.对我来说,这是侧边栏中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;
          }
        "
      )
    ) 
  )