Question

我下面的应用使用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的整个高度，在这里情况并非如此。任何知道如何实现这一目标的想法都会有所帮助

Answer 1

这似乎可行：

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)

如何调整multiInput（）的高度以占据整个div

1 个答案: