Resize HTML Forms In Firefox - gHacks Tech News

Resize HTML Forms In Firefox

Some web developers like to squeeze small HTML forms on websites which are uncomfortable to use for the visitors of the site due to the size they are presented in.

Imagine a comment form that displays three lines that each can take only a few words. It's problematic to write a comment of a hundred words or so in such a box and nearly impossible to proofread it once you are done. While you can write the comment elsewhere and paste it into the form once you are done, that is not too comfortable either.

Text Area Resizer And Mover comes to the rescue; At least for Firefox users. The Firefox extension lets you resize virtually any HTML form that you encounter on the Internet. To top it all off, this is done in an uncomplicated manner and well integrated into the browser

Once a HTML form has been located that you want to resize you simply press the right-mouse button after moving the mouse into the form. The mouse pointer changes to a resize symbol so that you can resize the HTML by moving the mouse around.

The default HTML form on Ghacks for commenting on an article:

before html form

The altered HTML form on Ghacks after using the extension to resize it

It is possible to make it smaller or bigger although most users will probably stick with the latter. Text Area HTML forms are those that tend to span across multiple rows. The extension cannot be used to increase the size of the Google Search form but as you can see in the images above it is possible to change comment forms and the like easily.

The forms only expand to the right and bottom of the screen but never to the left or upwards so move the mouse in those directions if you want to increase the size of a form.

Update: The Firefox add-on has been discontinued. You can use the following bookmarklet instead.

Update 2: Some browsers, Mozilla Firefox or Google Chrome, support the feature out of the box. You find a small drag icon in the lower right corner of text fields in the browser, and may drag it to change the size of the field.

Summary
Resize HTML Forms In Firefox
Article Name
Resize HTML Forms In Firefox
Description
Find out how to resize any text form that you encounter on the Internet in the Firefox browser using an easy to learn method.
Author
Publisher
Ghacks Technology News
Logo

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

Comments

  1. Keshav said on August 24, 2008 at 5:28 pm
    Reply

    Good post! Seems like you were so excited when writing this post that you forgot to include the link to the addon :D

  2. Martin said on August 24, 2008 at 5:37 pm
    Reply

    link added, sorry for that.

  3. Crazyfox said on August 24, 2008 at 6:40 pm
    Reply

    For greasemonkey: textarea drag resize.
    http://userscripts.org/scripts/show/10140

  4. Dante said on August 24, 2008 at 9:17 pm
    Reply

    Whenever I encounter such websites where the webmaster only tested their form boxes in 640×480 format, I automatically assume that I’m not part the demographics that they want, and not bother with them. I’m assuming they don’t want anybody with money to spend on bigger monitors and larger text. So when the text box comes up and overshadows the words in the article and it’s impossible to read or fill out because the “submit” button is off the screen of the box, I just assume they want poor, penniless nobodies as their audience group.

    While this add-on is nice. I don’t see the need to do business with people who obviously doesn’t have anything I want.

  5. Roman ShaRP said on August 25, 2008 at 1:29 pm
    Reply

    Not a big deal, but nice implementation :)

  6. Dotan Cohen said on August 25, 2008 at 6:21 pm
    Reply

    It does not resize the form, but rather the textarea elements. Here are some Javascript booklets that are similar:

    javascript:for(var%20a=document.getElementsByTagName(“textarea”),i=0;i<a.length;i++){a[i].style.width=”100%”;a[i].style.height=”300px”;}void(0);

    ———————————————-
    javascript:(function(){var%20i,x;%20for(i=0;x=document.getElementsByTagName(%22textarea%22)[i];++i)%20x.rows%20+=%205;%20})()

    ———————————————-
    javascript:TxtRsz={formEl:null,adEv:function(t,ev,fn){if(typeof%20document.addEventListener!=’undefined’){t.addEventListener(ev,fn,false)}else{t.attachEvent(‘on’+ev,fn)}},rmEv:function(t,ev,fn){if(typeof%20document.removeEventListener!=’undefined’){t.removeEventListener(ev,fn,false)}else{t.detachEvent(‘on’+ev,fn)}},init:function(){var%20textareas=document.getElementsByTagName(‘textarea’);for(var%20i=0;i<textareas.length;i++){textareas[i].style.cursor=’se-resize’}var%20inputs=document.getElementsByTagName(‘input’);for(var%20i=0;i<inputs.length;i++){if(inputs[i].type==’text’){inputs[i].style.cursor=’e-resize’}}TxtRsz.adEv(document,’mousedown’,TxtRsz.initResize)},initResize:function(event){if(typeof%20event==’undefined’){event=window.event}var%20target=event.target||event.srcElement;if(target.nodeName.toLowerCase()==’textarea’||(target.nodeName.toLowerCase()==’input’&&target.type==’text’)){TxtRsz.formEl=target;TxtRsz.formEl.startWidth=TxtRsz.formEl.clientWidth;TxtRsz.formEl.startHeight=TxtRsz.formEl.clientHeight;TxtRsz.formEl.startX=event.clientX;TxtRsz.formEl.startY=event.clientY;TxtRsz.adEv(document,’mousemove’,TxtRsz.resize);TxtRsz.adEv(document,’mouseup’,TxtRsz.stopResize);try{event.preventDefault()}catch(e){}}},resize:function(event){if(typeof%20event==’undefined’){event=window.event}try{TxtRsz.formEl.style.width=event.clientX-TxtRsz.formEl.startX+TxtRsz.formEl.startWidth+’px’}catch(e){}if(TxtRsz.formEl.nodeName.toLowerCase()==’textarea’){TxtRsz.formEl.style.height=event.clientY-TxtRsz.formEl.startY+TxtRsz.formEl.startHeight+’px’}},stopResize:function(event){TxtRsz.rmEv(document,’mousedown’,TxtRsz.initResize);TxtRsz.rmEv(document,’mousemove’,TxtRsz.resize);var%20textareas=document.getElementsByTagName(‘textarea’);for(var%20i=0;i<textareas.length;i++){textareas[i].style.cursor=’text’}var%20inputs=document.getElementsByTagName(‘input’);for(var%20i=0;i<inputs.length;i++){if(inputs[i].type==’text’){inputs[i].style.cursor=’text’}}}};TxtRsz.init();

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.