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

【问题标题】：How to vertically align multiple radio button columns in Shiny R?如何在 Shiny R 中垂直对齐多个单选按钮列？
【发布时间】：2020-09-19 02:17:16
【问题描述】：

我想在 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 =

【问题讨论】：

标签： r shiny shinydashboard

【解决方案1】：

我认为最简单的方法是为此使用引导 css。我们可以做的是添加列和行的类，就像我们在闪亮中使用fluidRow 和'column' 时所做的那样。例如，column(width = 2) 实际上只是带有class=col-md-2 的div。

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

之后

  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;"
    )
  )

应该可以的。

【讨论】：