Как предотвратить наложение двух входных меток в splitLayout, Shiny, R?

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)

Первый снимок экрана:

Скриншот Sceond:

Обновление

@ Симран указал, что overflow: visible является причиной этой проблемы. Однако мне нужно это, чтобы расширить мое меню в selectInput на основе этого сообщения: https://stackoverflow.com/a/40098855/7669809

Answer 1

Я полагаю, использование fluidRow() с column() является вариантом для вас.

Тогда вы можете использовать:

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

Примечание 1:

Вы можете контролировать ширину ввода с помощью параметра ширины column().

Примечание 2:

Sidenote: Если вы хотите использоватьполная ширина 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)

Answer 2

Удалить overflow: visible.Это то, что заставляет текст перетекать в div.Я вижу это здесь в вашем коде:

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