R Shiny 同一下拉菜单同时实现左对齐与右对齐方案咨询

你可以通过自定义Selectize组件的渲染逻辑+CSS布局实现下拉选项双对齐效果，核心是用flex弹性布局将每个选项拆分为左右两个独立区块，分别设置对齐规则，不需要依赖制表符等等宽字符对齐。

步骤说明 #

1. 添加自定义CSS，定义下拉选项、选中后输入框内容的flex布局规则，实现左右两端对齐
2. 为selectizeInput添加自定义渲染配置，将每个选项的文本拆分为左侧字母区、右侧数值括号区，分别应用样式
3. 修改下拉选项的构造逻辑，保留原始的文本和数值字段，方便渲染时拆分使用

完整可运行修改后代码 #

library(shiny)

# Define UI 
ui <- fluidPage(
  # 新增自定义CSS
  tags$head(
    tags$style(HTML("
      /* 下拉菜单选项布局 */
      .selectize-dropdown-content .option {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 20px; /* 左右两块的间距，可自行调整 */
      }
      /* 选中后输入框内的内容布局 */
      .selectize-input .item {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 20px;
      }
    "))
  ),
  # App title ----
  titlePanel("Dropdown Problems"),
  # Sidebar layout with input and output definitions 
  sidebarLayout(
    # Sidebar panel for inputs 
    sidebarPanel(
      # 修改SelectizeInput，添加自定义渲染规则
      selectizeInput("selection_dropdown", "Select Selection of Interest:",
                     choices=NULL,
                     options=list(
                       maxItems=1,
                       placeholder='Select Selection',
                       create=TRUE,
                       # 自定义选项渲染
                       render = I("{
                         option: function(item, escape) {
                           return '<div class=\"option\"><span>' + escape(item.label_left) + '</span><span>' + escape(item.label_right) + '</span></div>';
                         },
                         item: function(item, escape) {
                           return '<div class=\"item\"><span>' + escape(item.label_left) + '</span><span>' + escape(item.label_right) + '</span></div>';
                         }
                       }")
                     )
      )
    ),
    # Main panel for displaying outputs ----
    mainPanel(
      # Output: 
      plotOutput(outputId = "sample_plot")
    )
  )
)

server <- function(session,input, output) {
  # Define New Data Frame 
  new_data_frame <- data.frame(column1=c("aaaaaaaa","bb","cccc"),column2=c(1,2,3),column3=c("plot_a","plot_b","plot_c"))
  
  # Create Dropdown Menu 
  observe({
    # 构造带自定义字段的选项列表
    dropdown_choices <- lapply(1:nrow(new_data_frame), function(i) {
      list(
        value = new_data_frame$column1[i], # 实际返回值
        label_left = new_data_frame$column1[i], # 左侧展示文本
        label_right = paste0("(", new_data_frame$column2[i], ")") # 右侧展示文本
      )
    })
    updateSelectizeInput(
      session,
      "selection_dropdown",
      choices = dropdown_choices,
      server = TRUE
    )
  })
  # Create Output Plot (This doesn't really matter)
  output$sample_plot <- renderPlot({
    # 这里直接用input返回的value即可，不需要正则匹配
    plot_selection <- new_data_frame$column3[new_data_frame$column1 == input$selection_dropdown]
    plot(
      x=NA,
      y=NA,
      xlim=c(0,100),
      ylim=c(0,100)
    )
    text(x=50,y=50,plot_selection)
  })
}

shinyApp(ui = ui, server = server)

效果说明 #

• 所有下拉选项的字母部分统一左对齐，数值括号部分统一右对齐，不会受左侧文本长度影响
• 选中后输入框内的内容也会保持同样的对齐效果
• 可通过调整CSS中的gap参数修改左右两块的间距，适配不同的下拉菜单宽度

内容的提问来源于stack exchange，提问作者person