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

Posted 2023-03-24

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

【英文标题】：How to prevent the overlapping of two input labels in splitLayout, Shiny, R?

【发布时间】：2019-09-04 03:59:41

【问题描述】：

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

【问题讨论】：

可能重复：***.com/questions/3587390/…

@Simran 感谢您指出这篇文章。尽管我相信您提到的帖子与我的问题有关，但该帖子并未提及有关Shiny 的任何内容。我没有 HTML 方面的经验。如果您不介意，您能否帮助我开发正确的 div 行，我可以插入到我的 R 代码中？

【参考方案1】：

我假设您可以选择使用 fluidRow() 和 column()。

那么你可以使用：

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

注 1：

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

注2：

旁注：如果您想使用 12 的全宽，您还必须将 mainPanel() 设置为 12，参见例如这里： https://***.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://***.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)

【讨论】：

很好的解决方案。谢谢。当系统允许我这样做时，我会奖励你赏金。

【参考方案2】：

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

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

【讨论】：

感谢您的回答。我给了你一个赞成票。但是overflow: visible 是我在selectInput 中展开菜单所必需的。至少这是我从这篇文章“***.com/a/40098855/7669809”中学到的。有没有办法在防止文本溢出的同时扩展菜单？

我建议查看从您的代码生成的 HTML 输出，并添加针对更具体元素的样式。我怀疑您使用此样式所针对的div 是围绕其他元素的包装器，并且需要单独保留其溢出以像容器一样运行。也许一个更具体的元素需要overflow:visible，但这让我觉得这是一种可能需要不同布局的hacky方法。

感谢您的建议。好点子。我会调查div更多。