水平对齐单独的复选框（而不是复选框组）

Question

我有一个 Shiny 应用程序，用户可以根据

textInput

选择多个

numericInput

框，这也决定了复选框对的数量。标记这些复选框后，

textInput

中的文本将根据标记的复选框添加到单独的列表中。现在，复选框是垂直呈现的，我希望它们水平显示（并排）。我一直试图弄清楚如何用 CSS 来做到这一点，但无济于事。有没有办法用 CSS 或其他方法来做到这一点？我知道您可以轻松地使用

checkboxGroupInput

和

inline=TRUE

来执行此操作，但我发现这种方法很困难，因为我希望每个复选框都将

textInput

发送到单独的列表。

有人对此有什么想法吗？

library(shiny)
library(shinyWidgets)
library(htmlwidgets)

########## User interface ##########
ui = fluidPage(

  navbarPage("",
             
             
             #### Tab Panel 3 ####
             tabPanel("",
                      fluidRow(
                        sidebarPanel(
                          
                          
                          ####Conditions information####
                          #Determine the number of conditions to be labelled
                          
                          
                          numericInput("num_conds", 
                                       label = "Conditions",
                                       min = 1,
                                       max = 96,
                                       value = 1),
                          
                          br(),
                          h5(helpText("Changing the number of experimental conditions will erase all designated colors and conditions.")),
                          
                          helpText("control checkbox"),
                          verbatimTextOutput("ctls_checked"),
                          helpText('normalizing control checkbox'),
                          verbatimTextOutput("norm_ctls_checked")
                          
                          
                          
                        ),
                        mainPanel(
                          tags$style('
                                     .shiny-options-group{ 
                                        margin-top: 5px !important;}
                                     .
                                     '),
                          column(4, "",
                                 
                                 uiOutput("boxes_conds")
                                 
                                 
                          ), #close condition columns
                          column(4, "",
                                 
                                 uiOutput("control_checkbox"),
                                 
                          ),
                          
                          
                        ),
                      ), #close fluidrow
             ), #End panel 3
             
             
  ) #close navbarpage
)#close ui, fluidpage


########## Server logic #########

server = function(input, output, session) {
  
  
  
  
  #### Page 3: Conditions ####
  
  #Number output for number of conditions
  output$value <- renderPrint({ input$num_conds })
  
  #Experimental condition boxes for UI text input
  output$boxes_conds <- renderUI({
    num_conds <- as.integer(input$num_conds)
    
    lapply(1:num_conds, function(i) {
      cond_names <- textInput(paste0("condID", i),
                              label = paste0("Treatment/ Condition ", i),
                              placeholder = "Enter condition...")
    })
  })
  
  output$control_checkbox <- renderUI({
    num_conds <- as.integer(input$num_conds)
    
    lapply(1:num_conds, function(i) {
      div(
        checkboxInput(paste0("CTLcheckbox", i), 
                      label = paste0("Control ", i), 
                      value = FALSE),
        
        checkboxInput(paste0("normCTLcheckbox", i), 
                      label = paste0("Normalizing control ", i), 
                      value = FALSE),
        
        
        style = 'padding-bottom: 7.62px;'

      )
    })
  })
  
  #verification list for the controls, positive/mut or negative/WT
  controls_list <- list()
  
  controls <- reactive({ 
    num_conds <- as.integer(input$num_conds)
    
    lapply(1:num_conds, function(i) { 
      if(input[[paste0('CTLcheckbox', i)]] ==  TRUE) 
        controls_list <- input[[paste0('condID', i)]]
    })
    
  })
  
  controls_coll <- reactive({ strsplit(paste0(unlist(controls(), recursive = FALSE), collapse = ','), ",") })

  
  output$ctls_checked <- renderPrint({ 
    controls_coll()
    
  })
  
  #verification list for the normalized controls list
  normalized_controls_list <- list()
  
  normalized_controls <- reactive({ 
    num_conds <- as.integer(input$num_conds)
    
    lapply(1:num_conds, function(i) {
      
      if(input[[paste0('normCTLcheckbox', i)]] ==  TRUE) 
        controls_list <- input[[paste0('condID', i)]]
    })
  })
  
  normalized_controls_coll <- reactive({ strsplit(paste0(unlist(normalized_controls(), recursive = FALSE), collapse = ','), ",") })
  
  
  output$norm_ctls_checked <- renderPrint({ 
    normalized_controls_coll()
    
  })
   
} # close server

shinyApp(ui = ui, server = server)

Answer 1

这可以使用

flexbox

来实现。将列宽扩大到 6 并将样式

"display:-webkit-flex; display:-ms-flexbox; display:flex;"

添加到

renderUI

可以水平对齐框。

library(shiny)
library(shinyWidgets)
library(htmlwidgets)

########## User interface ##########
ui = fluidPage(
    
    navbarPage("",
        
               #### Tab Panel 3 ####
               tabPanel("",
                        fluidRow(
                            sidebarPanel(
                                
                                ####Conditions information####
                                #Determine the number of conditions to be labelled
                                
                                numericInput("num_conds", 
                                             label = "Conditions",
                                             min = 1,
                                             max = 96,
                                             value = 1),
                                
                                br(),
                                h5(helpText("Changing the number of experimental conditions will erase all designated colors and conditions.")),
                                
                                helpText("control checkbox"),
                                verbatimTextOutput("ctls_checked"),
                                helpText('normalizing control checkbox'),
                                verbatimTextOutput("norm_ctls_checked")
                                
                            ),
                            mainPanel(
                                tags$style('
                                     .shiny-options-group{
                                        margin-top: 5px !important;}
                                     .
                                     '),
                                column(6, "",
                                       
                                       uiOutput("boxes_conds")),
                                #close condition columns
                                column(6, "",
                                       
                                       uiOutput("control_checkbox"),),
                                
                                
                            ),
                        ), #close fluidrow
               ), #End panel 3
               
    ) #close navbarpage
)#close ui, fluidpage


########## Server logic #########

server = function(input, output, session) {
    
    #### Page 3: Conditions ####
    
    #Number output for number of conditions
    output$value <- renderPrint({ input$num_conds })
    
    #Experimental condition boxes for UI text input
    output$boxes_conds <- renderUI({
        num_conds <- as.integer(input$num_conds)
        
        lapply(1:num_conds, function(i) {
            cond_names <- textInput(paste0("condID", i),
                                    label = paste0("Treatment/ Condition ", i),
                                    placeholder = "Enter condition...")
        })
    })
    
    output$control_checkbox <- renderUI({
        num_conds <- as.integer(input$num_conds)
        
        lapply(1:num_conds, function(i) {
            div(
                style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
                
                checkboxInput(paste0("CTLcheckbox", i), 
                              label = paste0("Control ", i), 
                              value = FALSE),
                
                checkboxInput(paste0("normCTLcheckbox", i), 
                              label = paste0("Normalizing control ", i), 
                              value = FALSE),
                
            )
        })
    })
    
    #verification list for the controls, positive/mut or negative/WT
    controls_list <- list()
    
    controls <- reactive({ 
        num_conds <- as.integer(input$num_conds)
        
        lapply(1:num_conds, function(i) { 
            if(input[[paste0('CTLcheckbox', i)]] ==  TRUE) 
                controls_list <- input[[paste0('condID', i)]]
        })
        
    })
    
    controls_coll <- reactive({ strsplit(paste0(unlist(controls(), recursive = FALSE), collapse = ','), ",") })
    
    
    output$ctls_checked <- renderPrint({ 
        controls_coll()
        
    })
    
    #verification list for the normalized controls list
    normalized_controls_list <- list()
    
    normalized_controls <- reactive({ 
        num_conds <- as.integer(input$num_conds)
        
        lapply(1:num_conds, function(i) {
            
            if(input[[paste0('normCTLcheckbox', i)]] ==  TRUE) 
                controls_list <- input[[paste0('condID', i)]]
        })
    })
    
    normalized_controls_coll <- reactive({ strsplit(paste0(unlist(normalized_controls(), recursive = FALSE), collapse = ','), ",") })
    
    output$norm_ctls_checked <- renderPrint({ 
        normalized_controls_coll()
        
    })
    
} # close server

shinyApp(ui = ui, server = server)