R Shiny tie textarea width to wellPanel width

Question

I am learning how to use the shiny package in R to create an app using the ui.R and server.R files below:

# ui.R
library(shiny)
#
shinyUI(
    fluidPage(
        fluidRow(
            column(width = 6, 
                wellPanel(
                    h5("Your input ="),
                    tags$textarea(id = "myText", rows = 22, cols = 60, "")
                )
            ),
            column(width = 6, offset = 0,
                wellPanel(
                    h5("Our output ="),
                    verbatimTextOutput("myText")
                )
            )
        )
    )
)

and

# server.R
library(shiny)
#
shinyServer(
    function(input, output) {
        output$myText <- renderText({input$myText})
    }
)

What I would like to know is how I can make the textarea width vary when the window size changes, yet remain within its wellpanel? At present, the textarea width does not appear to change as the wellPanel get smaller or larger as the window size is changed. So the textarea can break out of its wellPanel, and get covered by the adjacent wellPanel!

Can the textarea width be tied to the wellPanel width so that it varies as the well panel gets smaller or larger? I am not knowledgeable in CSS or HTML, so would need a lot of help if the solution involves those.

Thanks!

SSB

Answer 1

I discovered this quite by chance, and it seems to work:

Add tags$style(type="text/css", "textarea {width:100%}"), to code in first wellPanel, as below:

wellPanel(
    h5("Your input ="),
    tags$style(type="text/css", "textarea {width:100%}"),
    tags$textarea(id = "myText", rows = 22, cols = 60, "")
)

Thanks, SSB