Question

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

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: https://stackoverflow.com/a/40098855/7669809
      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是导致此问题的原因。但是，根据此信息，我需要使用它来扩展selectInput中的菜单：https://stackoverflow.com/a/40098855/7669809

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参数来控制输入的宽度。

注释2：

旁注：如果要使用12的全宽，还必须将mainPanel()设置为12，例如这里： https://stackoverflow.com/a/44214927/3502164

完整应用-可复制的示例：

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: https://stackoverflow.com/a/40098855/7669809
      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中的两个输入标签重叠？

2 个答案: