Shiny: Width and Height arguments as percentages for textAreaInput don't work.

Created on 3 Aug 2018 · 6Comments · Source: rstudio/shiny

The defect pointed out in this StackOverflow question still exists. Specifying the width or height using a percent does not work.

https://stackoverflow.com/questions/40808889/a-dynamically-resizing-shiny-textareainput-box

Here is my ui.R that exhibits the issue:

library(shiny)
library(DT)

# Define UI for application that draws a histogram
shinyUI(fluidPage(

    # Application title
    titlePanel("My Tagger App"),

    fluidRow(
      column(8,
             textAreaInput("text", label = "Input Text", width = "100%", height = "100%"),
             actionButton("tagtext", "Tag Text")      
      ),

      column(4,
             dataTableOutput("tagstable"),
             htmlOutput("atomdetail")
      )
    )
))

Novice Low Low Type

Source

dkincaid

Most helpful comment

Just to clarify for those stumbling over this issue who don't want to read 3 stackoverflow threads:

The bug is that height= and width= for e.g. textInput() are applied to the .shiny-input-container. For textAreaInput() it's applied to the element itself (a child of the .shiny-input-container) so percentages are useless because the .shiny-input-container is the relevant element for sizing.

The best workaround has been posted by Rafael García on stackoverflow:

Use this

 textAreaInput("big_box", "Big box", value = "", rows = 5, resize = "both") %>%
     shiny::tagAppendAttributes(style = 'width: 100%;')

to change the styling of the input container

stefanfritsch on 16 Feb 2020

👍5 ❤1

All 6 comments

Technically, the 100% height is correctly rendered. If you open the app in a browser and go to the inspector you will see the text area is 100% of its parent element's height. For more on CSS heights and parent elements I suggest this SO conversation, https://stackoverflow.com/questions/1622027/percentage-height-html-5-css.

In your browser inspector try adjusting the height of the <html> element down through the text area's parent to 100%. Once you've set each height to 100% you'll see the text area height finally adjust. I'm sorry I don't have a solution, but I hope this at least illuminating.

nteetor on 3 Aug 2018

Thanks for the clarification, Nate. That helps me understand the height issue.

dkincaid on 3 Aug 2018

👍1

What is the issue with the width argument?

nteetor on 4 Jan 2019

answered here:
https://stackoverflow.com/questions/40808889/a-dynamically-resizing-shiny-textareainput-box

nigelhenry on 6 Jul 2019