Как настроить высоту multiInput (), чтобы он занимал весь div

У меня есть приложение, использующее multiInput() из shinyWidgets пакета

library(shinyWidgets)
library(shiny)

ui <- fluidPage(  
  div(style = "height: 200px;",
  tags$head(
    tags$style(".multi-wrapper {height: 90%;}"), 
    tags$style(".multi-wrapper .non-selected-wrapper, .multi-wrapper .selected-wrapper {height: 100%;}")
  ),
  div(style = "height: 100%; background-color: rgba(0,0,0,.3);",
      multiInput(
        inputId = "id", label = "Fruits :",
        choices = c("Banana", "Blueberry", "Cherry",
                    "Coconut", "Grapefruit", "Kiwi",
                    "Lemon", "Lime", "Mango", "Orange",
                    "Papaya"),
        selected = "Banana", width = "400px",
        options = list(
          enable_search = FALSE,
          non_selected_header = "Choose between:",
          selected_header = "You have selected:"
        )
      )
  )),
  verbatimTextOutput(outputId = "res")
)

server <- function(input, output, session) {
  output$res <- renderPrint({
    input$id
  })
}

shinyApp(ui = ui, server = server)

Я хочу, чтобы multiInput() занимал всю высоту родительского Div, чего здесь нет. Любая идея, как этого добиться, будет полезна.


shiny shinyapps
person Bogaso    schedule 17.07.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, это работает:

library(shinyWidgets)
library(shiny)

ui <- fluidPage(  
  tags$head(
    tags$style(".multi-wrapper {height: 350px;}"), # 350 = 400-50 (400 is the height of the div)
    tags$style(".multi-wrapper .non-selected-wrapper, .multi-wrapper .selected-wrapper {height: 100%;}")
  ),
  div(style = "height: 400px",
      multiInput(
        inputId = "id", label = "Fruits :",
        choices = c("Banana", "Blueberry", "Cherry",
                    "Coconut", "Grapefruit", "Kiwi",
                    "Lemon", "Lime", "Mango", "Orange",
                    "Papaya"),
        selected = "Banana", width = "400px",
        options = list(
          enable_search = FALSE,
          non_selected_header = "Choose between:",
          selected_header = "You have selected:"
        )
      )
  ),
  verbatimTextOutput(outputId = "res")
)

server <- function(input, output, session) {
  output$res <- renderPrint({
    input$id
  })
}

shinyApp(ui = ui, server = server)
person Stéphane Laurent    schedule 17.07.2019
comment
Спасибо. Но все равно не работает, если я деформирую весь материал в div, а затем регулирую высоту дочерних Div в процентах от этого родителя. Изменил мой пост, чтобы зафиксировать эту проблему. - person Bogaso; 17.07.2019
comment
Спасибо, у меня это хорошо работает. - person Matt_B; 08.05.2021