R Shiny如何实现sidebarPanel无滚动适配页面展示

完全可以通过原生参数配置+少量自定义CSS实现侧边栏全内容单屏展示，不需要改动原有输入项的功能逻辑，几个优化点组合使用效果最好：

• 缩减侧边栏全局内边距：默认sidebarPanel自带20px左右的上下内边距，属于可压缩的冗余空间
• 缩小侧边栏全局字号：将输入标签、选项文字字号从默认的14px调整到12-13px，不会影响正常可读性
• 单选按钮改水平排列：radioButtons原生支持inline = TRUE参数，开启后选项单行排列，大幅降低垂直高度占用
• 压缩输入组件间距：默认每个输入控件自带15px左右的下边距，适当缩小可以挤出更多显示空间
• 缩小输入控件、按钮的内边距：默认选择框、按钮的上下内边距也有充足的压缩空间

可直接复用的实现代码 #

在UI部分加入自定义压缩样式，再调整对应radioButtons的参数即可：

library(shiny)

ui <- fluidPage(
  # 自定义压缩样式
  tags$style(HTML("
    /* 压缩侧边栏整体内边距 */
    .sidebar {
      padding: 12px !important;
    }
    /* 缩小侧边栏全局字号，压缩控件间距 */
    .sidebar .form-group, .sidebar .btn {
      font-size: 13px !important;
      margin-bottom: 8px !important;
    }
    /* 压缩输入框、按钮的上下内边距 */
    .sidebar .form-control, .sidebar .btn {
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      height: auto !important;
    }
    /* 压缩控件标签的下边距 */
    .sidebar label {
      margin-bottom: 3px !important;
    }
  ")),
  sidebarPanel(
    selectizeInput(
      "s1",
      "Select s1",
      choices = c('A', 'B'),
      multiple = FALSE
    ),
    # 单选按钮开启inline参数实现水平排列
    radioButtons(
      "r1",
      "Select r1",
      choices = c("A", "B", "C"),
      inline = TRUE
    ),
    radioButtons(
      "r2",
      "Select r2",
      choices = c("P", "R"),
      inline = TRUE
    ),
    selectizeInput(
      "s3",
      "Select s3",
      choices = c('C', 'D'),
      multiple = FALSE
    ),
    selectizeInput(
      "s4",
      "Select s4",
      choices = c('A', 'B'),
      multiple = TRUE
    ),
    selectizeInput(
      "s5",
      "Select s5",
      choices = c('A', 'B'),
      multiple = FALSE
    ),
    selectizeInput(
      "s6",
      "Select s6",
      choices = c('A', 'B'),
      multiple = TRUE
    ),
    selectizeInput(
      "s7",
      "Select s7",
      choices = c('A', 'B'),
      multiple = FALSE
    ),
    selectizeInput(
      "s8",
      "Select s8",
      choices = c('A', 'B'),
      multiple = TRUE
    ),
    actionButton(
      "b1",
      "Enter",
      width = "100%"
    )
  ),
  mainPanel(
    # 主面板业务内容
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

额外优化建议 #

如果调整后在极小尺寸屏幕下还是差一点空间，可以给侧边栏配置细样式的自定义滚动条，仅当视口高度不足时触发，常规尺寸屏幕下完全不显示，观感比默认浏览器滚动条好很多；也可以把多选selectizeInput的默认展开选项数调低，进一步减少垂直占用。

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