textInputボックスの高さをユーザー入力で調整する

Question

ユーザーがtextInputフィールドの「行」の最後に達して、次の行に続き、テキストボックスの高さが増えるようにする方法はありますか彼らは彼らが入力したものの全体を見ることができますか？現在、テキストは同じ行に続き、最初に入力されたものは見えなくなります。テキストボックスの高さを上げると、テキストボックスの終わりに達した場合に、スクロールバーが表示され、入力されたものの先頭に戻ることができます。

library('shiny') 
ui<-fluidPage(
    fluidRow(
    textInput(inputId = "response1", label = "Type your Response Below") 
)) 
server<-function(input,output,session) 
{} 
shinyApp(ui=ui, server=server) 

Answer 1

簡単に言うと、私の命題はHTMLタグtextareaを使用するようにして、それを光沢のあるウィジェットのCSSスタイルを与えることです。

以下の例では、最初に新しいdivを作成しました。textareaにid=response2とラベルを付けました。次にtextInputのCSSスタイルを追加してタグにheadとstyleタグを使用して適用しました。

---

全例：

library(shiny) 
ui <- fluidPage(

    # Default style of normal textInput applied to the textarea (HTML tag) 
    tags$head(
     tags$style("textarea { 
        width:300px; 
        height:34px; 
        display: block; 
        padding: 6px 12px; 
        font-size: 14px; 
        line-height: 1.42857143; 
        color: #555; 
        background-color: #fff; 
        background-image: none; 
        border: 1px solid #ccc; 
        border-radius: 4px; 
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
        } 

        textarea:focus { 
        border-color: #66afe9; 
        outline: 0; 
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); 
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) 
       }" 
    ) 
    ), 


    h3("Normal text input"), 
    textInput(inputId = "response1", label = "Type your Response Below"), 


    h3("Styled textarea"), 
    withTags(
     div(
     h5(b("Type your Response Below")), 
     textarea(id = "response2") 
    ) 
    ), 


    br(), 
    h3("Text from the styled textarea"), 
    textOutput("out") 
) 

server<-function(input, output, session) { 
    output$out <- renderText({ 
    input$response2 
    }) 
} 

shinyApp(ui = ui, server = server) 

編集：

コードの少ない量で同じことを行うための別の方法は、光沢のCSSクラスを追加することですtextareaタグにform-control shiny-bound-inputを入力し、style属性を使用して幅と高さを変更します。

library(shiny) 
ui <- fluidPage(
    h3("Normal text input"), 
    textInput(inputId = "response1", label = "Type your Response Below"), 

    h3("Styled textarea"), 
    withTags(
     div(
     h5(b("Type your Response Below")), 
     textarea(id = "response2", 
       class = "form-control shiny-bound-input", 
       style = "width: 300px; height: 34px") 
    ) 
    ), 

    br(), 
    h3("Text from the styled textarea"), 
    textOutput("out") 
) 

server<-function(input, output, session) { 
    output$out <- renderText({ 
    input$response2 
    }) 
} 

shinyApp(ui = ui, server = server)