動的にリサイズする光沢のあるtextAreaInputボックス？

Question

私は、ブラウザが最小/最大化されたときに私のウェブページの100％に及ぶサイズ変更されたtextAreaInputボックスを作成しようとしています。引数width = 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) { 
    } 
) 

-

乾杯

Answer 1

textAreaInputが、最近、バージョン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) { 
    } 
) 

Answer 2

それともあなたは自分のUI機能を例えば内ヘッダータグを使用してCSSをオーバーライドすることができます：

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