r - 动态调整大小的 Shiny textAreaInput框？

我试图制作一个textAreaInput框，使其光泽度跨我的网页的100％，并在最小/最大化浏览器时调整其大小。我可以通过提供参数width = 100％来制作具有此行为的简单textInput。即使在textInput和textAreaInput手册页上具有相同的宽度，向textAreaInput提供相同的参数也不会产生相同的行为。这是期望的行为还是错误？

一个最小的工作示例-

library(shiny)

shinyApp(
    #UI
    ui = fluidPage(
        fluidRow(
            column(12,
                textAreaInput("big_box", "Big box", value = "", width = '100%', rows = 5, resize = "both")
            )
        ),
        fluidRow(
            column(12,
                textInput("long_box", "Long box", value = "", width = '100%')
            )
        )
    ),
    #Server
    server = function(input, output) {
    }
)

示例输出-



干杯

最佳答案

textAreaInput最近已在版本14中添加到Shiny，似乎是由shiny-input-container类引起的错误。在shiny.css中，我们可以找到:



最简单的解决方法是根据原始类创建一个新函数，而不使用shiny-input-container类。以下是新功能。

library(shiny)

#based on Shiny textAreaInput
textAreaInput2 <- function (inputId, label, value = "", width = NULL, height = NULL,
    cols = NULL, rows = NULL, placeholder = NULL, resize = NULL)
{
    value <- restoreInput(id = inputId, default = value)
    if (!is.null(resize)) {
        resize <- match.arg(resize, c("both", "none", "vertical",
            "horizontal"))
    }
    style <- paste("max-width: 100%;", if (!is.null(width))
        paste0("width: ", validateCssUnit(width), ";"), if (!is.null(height))
        paste0("height: ", validateCssUnit(height), ";"), if (!is.null(resize))
        paste0("resize: ", resize, ";"))
    if (length(style) == 0)
        style <- NULL
    div(class = "form-group",
        tags$label(label, `for` = inputId), tags$textarea(id = inputId,
        class = "form-control", placeholder = placeholder, style = style,
        rows = rows, cols = cols, value))
}

shinyApp(
    #UI
    ui = fluidPage(
        fluidRow(
            column(12,
                textAreaInput2("big_box2", "Big box", value = "", width = '100%', rows = 5, resize = "both")
            )
        ),
        fluidRow(
            column(12,
                textInput("long_box", "Long box", value = "", width = '100%')
            )
        )
    ),
    #Server
    server = function(input, output) {
    }
)