2016-11-25 104 views
2

我正在嘗試製作一個textAreaInput框,其中包含100%的網頁,並在瀏覽器最小/最大化時調整大小。我可以通過提供參數width = 100%來製作一個簡單的textInput。即使寬度在textInputtextAreaInput手冊頁上具有相同的描述,向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) { 
    } 
) 

實施例輸出 -

乾杯

回答

3

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) { 
    } 
) 
2

或者你可以只用你的UI功能e.g內的標題標記覆蓋CSS:

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