height of textInput box adjust with user input

Question

Is there a way to make it so that if a user reaches the end of the "line" on a textInput field that it continues on the next line and increases the height of the textbox so that they can see the entirety of what they have typed? Right now, the text continues on the same line making what was typed first no longer visible. Increasing the height of the textbox would also work given that if they reached the end of textbox, then a scroll bar appeared allowing them to go back to the top of what was typed.

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

Viable

Answer 1

Briefly, my proposition is to use an HTML tag textarea and then to give it the css style of shiny widgets.

In the example below I had first created a new div in which I put the HTML tag textarea with id=response2 and a label. Then I added the the css style of the textInput from and applied it to the textarea tag using tags head and style.

---

Full example:

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)

Edit:

Another way of doing the same thing with a smaller amount of the code would be to add the css class of shiny inputs form-control shiny-bound-input to the textarea tag and change the width and the height using style attribute.

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)

Chuipek

This was perfect thank you, textarea was what I was looking for! – Viable

Answer 2

Another way to achieve this is to use textAreaInput instead of textInput, which takes the parameter rows. This parameter, according to the textAreaInput documentation, takes "The value of the visible character rows of the input".

As such, it can be used like so:

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

PS: textAreaInput has its own update-value function: updateTextAreaInput (just in case you are using the textInput's equivalent of updateTextInput)

Thyself

Should be the validated answer: no external css use, and create a sizeable text area by code + allow user to drag the bottom right of the text area to modify its size. – Insensate

@Insensate I agree. – Sharl