如何在 Shiny R 中垂直对齐多个单选按钮列？

Question

我想在 Shiny 中的 tabItem 中创建一个单选按钮列表。如果我设置 inline = TRUE，它会将所有内容都放在水平线上，但没有任何内容整齐排列。我将如何垂直对齐以下代码中的单选按钮，同时定义我想要的列数？

        # Descriptive Plots tab content
    tabItem(tabName = 'descrPlots',
            fluidRow(
              column(width = 2,
                     box(
                       width = NULL, background = "aqua",
                       radioButtons('radio_Descr',label = h3("Choose a Variable to View:"),
                                    choices = list('TA' = 'TA','PP' = 'PP', 'US' = 'US', 'UD' = 'UD', 'UE' = 'UE',
                                                   'UG' = 'UG', 'UH' = 'UH', 'XR' = 'XR', 'RW' = 'RW', 'PA' = 'PA', 'TB4' = 'TB4',
                                                   'TV2' = 'TV2', 'TV4' = 'TV4', 'TV8' = 'TV8', 'TV20' = 'TV20', 'TV40' = 'TV40', 
                                                   'MV2' = 'MV2', 'MV4' = 'MV4', 'MV8' = 'MV8', 'MV20' = 'MV20', 'MV40' = 'MV40',
                                                   'VB' = 'VB', 'TA40' = 'TA40', 'TA120' = 'TA120', 'SD' = 'SD'), inline = TRUE, selected = NULL)
                       
                     )
              )
            )
    )

我想我可以像下面这样将单选按钮包装在一个 tagList 中，但是我需要什么代码才能真正让它工作？我不是 HTML 或 CSS 程序员，无法很好地理解其他问题。到目前为止，所有这些代码都在 Shiny 应用程序的 UI 部分，而不是服务器部分。也许这也应该改变？谢谢。

       box(
          width = NULL, background = "aqua",
            tagList(
                    tags$style(type = 'text/css', '#radiobuttons .multicol{-webkit-column-count: 2; 
                                 -moz-column-count: 2; column-count: 2;}'), 
                    div(id = 'radiobuttons',
                          radioButtons('radio_Descr',label =

Answer 1

我认为最简单的方法是为此使用 bootstrap css。我们可以做的是为列和行添加 classes，就像我们在 shiny 中使用 fluidRow 和 'column' 时所做的一样。例如 column(width = 2) 实际上只是 div 和 class=col-md-2.

我们可以使用 jquery 将这些 class 添加到带有 javascript 代码的单选按钮中 $('.radio-inline').addClass('col-md-3'); 为了使这个正常工作我们需要添加 class row 到父标签 $('.shiny-options-group').addClass('row'); 要在 shiny 中执行此操作，我们添加以下代码在单选按钮

之后

  tags$script("$('.radio-inline').addClass('col-md-3');$('.shiny-options-group').addClass('row');"),

为了让它看起来非常漂亮，我们还需要将 margin-left:10px 设置为第一个单选按钮，默认情况下仅添加到 2:nd 和后续按钮。我们可以通过插入这段代码来做到这一点

tags$head(
    tags$style(
      ".radio-inline{margin-left:10px;"
    )
  )

应该可以了。

如何在 Shiny R 中垂直对齐多个单选按钮列？

How to vertically align multiple radio button columns in Shiny R?

r

shiny

shinydashboard