2

以下ui示例的 包含四个selectInput. 最后两个在一个splitLayout. 我注意到，当我启动应用程序时，如果窗口大小不够大，最后两个标签会重叠，如第一个屏幕截图所示。是否可以使输入的标签splitLayout动态变化取决于窗口的宽度？比较将是前两个selectInput。如第二个屏幕截图所示，当我减小窗口宽度时，标签会变为两行。我希望 .in 中的最后两个具有相同的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

4

2 回答 2

1

我认为使用fluidRow()withcolumn()是您的一个选择。

然后你可以使用：

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

注1：

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

笔记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)
于 2019-04-15T20:09:15.900 回答
1

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

.shiny-split-layout > div {
  overflow: visible;
}
于 2019-04-13T17:43:39.777 回答