Increase the text area to view more lines of text

Question

Is there any way to increase the text-area found here... ?

https://www.google.com/intl/mr/inputtools/try/

I tried this bookmarklet but it does not seem to work:

javascript:(function(){var%20i,x;%20for(i=0;x=document.getElementsByTagName("INPUT")[i];++i)%20x.size%20+=%2035;%20})()

I could read more text in bigger text area. There seems to be no option to change the height of the input box.

Answer 1

 javascript:(function () { const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].style.resize = 'auto'; } })()

If you add the css property resize: auto on the textarea you can play with the sizes by dragging the textarea from the bottom right corner of it.

Using Bookmarklet:

javascript:(function () {
  const tx = document.getElementsByTagName("textarea");
  for (let i = 0; i < tx.length; i++) {
    tx[i].style.resize = 'auto';
  }
})()

Answer 2

The following bookmarklet enlarges the textarea found at https://www.google.com/intl/mr/inputtools/try/ . It will lengthen the textarea to fit all the content without scrolling, or 500 pixels if the content is shorter. Tested on both Chrome and Firefox.

Bookmarklet:

https://bookmarkify.it/45407 (Don't add this link directly to the bookmark bar, add the bookmarklet link found there. You can also easily modify and create a new bookmarklet from the linked page.)

Code:

// Find the text area.
element = document.getElementById('demobox')

// Calculate new height.
newHeight = Math.max(500, element.scrollHeight)

// Set height of element.
element.style.height = newHeight + 'px'

Note this bookmarklet will probably only work on https://www.google.com/intl/mr/inputtools/try/ because it looks for a textarea with id 'demobox.' (This is what the question asked for.) If desired, you are free to generalize the script to resize all textareas on any site.