Question

我正在尝试创建一个有光泽的textAreaInput框，它跨越100％的网页，并在浏览器最小化/最大化时调整大小。我可以通过提供参数width = 100％来使用此行为创建一个简单的textInput。即使width在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) {
    }
)

示例输出 -

干杯

Answer 1

最近在版本14中将

textAreaInput添加到Shiny中，似乎它是由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) {
    }
)

Answer 2

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

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

Answer 3

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

例如：

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

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

3 个答案: