如何防止 splitLayout、Shiny、R 中两个输入标签的重叠？

Question

下例的ui包含四个selectInput。他们中的最后两个在splitLayout中。我注意到，当我启动应用程序时，如果 window 尺寸不够大，最后两个标签会重叠，如第一个屏幕截图所示。是否可以使 splitLayout 中输入的标签根据 window 的宽度动态变化？比较将是前两个 selectInput。如第二个屏幕截图所示，当我减小 window 宽度时，标签将变为两行。我希望 splitLayout 中的最后两个 selectInput 具有相同的行为。

library(shiny)

# Define UI
ui <- fluidPage(
  mainPanel(
    selectInput(inputId = "A", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    selectInput(inputId = "B", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    splitLayout(
      selectInput(inputId = "C", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
      selectInput(inputId = "D", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
      # Expand the menu in splitLayout
      # From: 
      tags$head(tags$style(HTML("
                              .shiny-split-layout > div {
                                overflow: visible;
                              }
                              ")))
  )
  )
)

# Server logic
server <- function(input, output, session){

}

# Complete app with UI and server components
shinyApp(ui, server)

第一张截图：

第二张截图：

更新

@Simran 指出 overflow: visible 是导致此问题的原因。但是，我需要根据此 post 在 selectInput 中扩展我的菜单：

Answer 1

删除overflow: visible。这就是使文本溢出 div 的原因。我在您的代码中看到了这一点：

.shiny-split-layout > div {
  overflow: visible;
}

Answer 2

我假设使用 fluidRow() 和 column() 是您的选择。

那么你可以使用：

    fluidRow(
      column(width = 4,
        selectInput(...)
      ),
      column(width = 4,
        selectInput(...)
      )
    )

注1：

可以通过column()的width参数来控制input的宽度。

注二：

旁注：如果你想使用 12 的全宽，你还必须将 mainPanel() 设置为 12，参见例如这里：

完整应用程序 - 可重现的示例：

library(shiny)

# Define UI
ui <- fluidPage(
  mainPanel(
    selectInput(inputId = "A", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    selectInput(inputId = "B", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    fluidRow(
      column(width = 4,
        selectInput(inputId = "C", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a")        
      ),
      column(width = 4,
        selectInput(inputId = "D", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a")
      )
    ),
      # Expand the menu in splitLayout
      # From: 
      tags$head(tags$style(HTML("
                              .shiny-split-layout > div {
                                display: inline-block;
                              }
                              ")))
    )
)

# Server logic
server <- function(input, output, session){

}

# Complete app with UI and server components
shinyApp(ui, server)

如何防止 splitLayout、Shiny、R 中两个输入标签的重叠？

How to prevent the overlapping of two input labels in splitLayout, Shiny, R?

html

css

r

shiny

selectinput