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，并在checkBox()之前添加一个p("text")，使其位于单行上。
2. 若要将文本设置为“白色”，请将style="color:#FFFFFF"添加到list(tags$div()中。
3. 我还在努力弄清楚为什么盒子会被稍微截断。