动态调整大小的闪亮 textAreaInput 框？答案

【问题标题】：A dynamically resizing shiny textAreaInput box?动态调整大小的闪亮 textAreaInput 框？
【发布时间】：2016-11-25 16:09:18
【问题描述】：

我正在尝试制作一个闪亮的 textAreaInput 框，它跨越我的网页的 100%，并在浏览器最小/最大化时调整大小。我可以通过提供参数宽度 = 100% 来制作具有此行为的简单 textInput。向 textAreaInput 提供相同的参数不会产生相同的行为，即使在 textInput 和 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) {
    }
)

示例输出 -

干杯

【问题讨论】：

标签： r shiny

【解决方案1】：

更简单的解决方法是使用 shiny::tagAppendAttributes 函数将高度和宽度参数设置为父元素。

例如：

 textAreaInput("big_box", "Big box", value = "", rows = 5, resize = "both") %>%
     shiny::tagAppendAttributes(style = 'width: 100%;')

【讨论】：

【解决方案2】：

或者您可以通过在您的 ui 函数中使用标题标签来覆盖 css，例如：

tags$style(HTML("                  
  .shiny-input-container:not(.shiny-input-container-inline) {
  width: 100%;
}"))

【讨论】：

【解决方案3】：

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

/* Limit the width of inputs in the general case. */

.shiny-input-container:not(.shiny-input-container-inline) {
  width: 300px;
  max-width: 100%;
}

最简单的解决方法是在原始函数的基础上创建一个没有类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) {
    }
)

【讨论】：