RShiny：checkBox格式

Question

盒子的当前状态：

我无法改进以下内容：

1. 将文本连续排列（选择模块...一个）
2. 框和文本未对齐在同一行。
3. 顶行的复选框略有截断。（其余部分包围在下方）
4. 标签（a到j）需要用白色粗体文字。

这是我到目前为止所尝试的：

ui.R：

library(shiny)
controls <- list(tags$div(align = 'left', 
                class = 'multicol', 
                checkboxGroupInput(inputId  = 'modules', 
                                   label    = "Step 1 : Select the modules to be executed", 
                                   choices  = c(process_names),
                                   selected = "",
                                   inline   = FALSE)))
shinyUI(fluidPage(
  tags$style(type='text/css', "label {font-size: 22px; }            # controls the text of check-boxes
             .form-group {margin-top: 5px; margin-bottom: 5px;}
             .nav-tabs {font-family:'arial';font-size:20px}
             #sidebar {background-color: #5C97BF;}
             #mainbar {background-color: #5C97BF;}
             body { background-color: #002B55;}
             input[type=checkbox] {transform: scale(2);}
             .multicol {height: 200px; -webkit-column-count: 4; 
             -moz-column-count: 4;    /* Firefox */
             column-count: 4; -moz-column-fill: auto;-column-fill: auto;} # increases the size of checkboxes
             div.checkbox {margin-top: 10px;color:'#FFFFFF';font-weight: bold; }
             .btn {display:block;height: 60px;width: 40px;border-radius: 50%;} # for actionButton
             "),

  sidebarLayout(
    position = "left",
    sidebarPanel(controls),
    mainPanel()
  )
))

server.R

shinyServer(
  function(input, output){

  }
)

Answer 1

以下是您应用的固定代码：

library(shiny)
process_names <- letters[1:13]
controls <- tags$div(
  tags$label("Step 1 : Select the modules to be executed"),
  tags$div(align = 'left', 
           class = 'multicol', 
           checkboxGroupInput(inputId  = 'modules', 
                              label    = NULL, 
                              choices  = c(process_names),
                              selected = "",
                              inline   = FALSE)))
ui<-(fluidPage(
  tags$style(type='text/css', "label {font-size: 22px; }           
             .form-group {margin-top: 5px; margin-bottom: 5px;}
             .nav-tabs {font-family:'arial';font-size:20px}
             #sidebar {background-color: #5C97BF;}
             #mainbar {background-color: #5C97BF;}
             body { background-color: #002B55;}
             input[type=checkbox] {transform: scale(2);margin-top:10px;}
             .multicol {height: 200px; -webkit-column-count: 4; 
             -moz-column-count: 4;    /* Firefox */
             column-count: 4; -moz-column-fill: auto;-column-fill: auto;} 
             .checkbox {margin-top:-5px;}
             .btn {display:block;height: 60px;width: 40px;border-radius: 50%;} 
             #modules .checkbox label span {font-weight:bold;}
             label {color:#fff;}
             "),

  sidebarLayout(
    position = "left",
    sidebarPanel(controls),
    mainPanel()
  )
  ))

server<-function(input,output){}

shinyApp(ui,server)

这可以解决您的所有问题。请注意，您遇到的一个大问题（我花了很长时间进行调试！）是因为您不能在CSS中使用#作为注释。这打破了你的CSS。您只能在CSS中使用/* comment here */作为评论。

Answer 2

1. 要将标签放在一行上，请设置label = NULL并在p("text")之前添加checkBox()以将其放在一行。

2. 要将文字设为“白色”，请在style="color:#FFFFFF"中添加list(tags$div()。

3. 我还在试图弄清楚为什么盒子会被略微截断。