Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do you implement a customizable Textsize area in Firefox 31.0?

more options

I am looking for a method to create expandable text fields in Firefox 31.0. If I leverage Chrome, this feature is enabled natively and I can expand the fields. I have yet to find a field in Firefox that I can expand so I'm uncertain if its disabled by Firefox or by the webpage I am interacting with but I suspect Firefox since it does work in Chrome.

I have uninstalled/reinstalled Firefox just to ensure that its not causing the issue. After some research I have found the css edit that can be created to change the textsize to "both" instead of horizontal/vertical/disabled but I can't seem to find this within the tools feature.

Any help would be greatly appreciated as I work daily with e-mails via a webpage and its annoying to write a long email and only be able to see maybe the first paragraph without scrolling.

I am currently zoomed out as far as possible while still making the font legible but I'd like to simply increase the field while keeping the same zoom level.

Firefox 31.0 Windows 7

  • Next Generation Java Plug-in 10.65.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Shockwave Flash 14.0 r0
  • Adobe PDF Plug-In For Firefox and Netscape 11.0.07
  • 5.1.30214.0
  • Citrix Online App Detector Plugin
  • VLC media player Web Plugin 2.1.3
  • ActiveTouch General Plugin Container Version 105
  • Adobe Shockwave for Director Netscape plug-in, version 12.0.6.147
  • Adobe Shockwave for Director Netscape plug-in, version 12.0.5.146
  • The plugin allows you to have a better experience with Microsoft Lync
  • The plugin allows you to have a better experience with Microsoft SharePoint
  • NPWLPG
  • Intel web components updater - Installs and updates the Intel web components
  • Intel web components for Intel® Identity Protection Technology
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers
I am looking for a method to create expandable text fields in Firefox 31.0. If I leverage Chrome, this feature is enabled natively and I can expand the fields. I have yet to find a field in Firefox that I can expand so I'm uncertain if its disabled by Firefox or by the webpage I am interacting with but I suspect Firefox since it does work in Chrome. I have uninstalled/reinstalled Firefox just to ensure that its not causing the issue. After some research I have found the css edit that can be created to change the textsize to "both" instead of horizontal/vertical/disabled but I can't seem to find this within the tools feature. Any help would be greatly appreciated as I work daily with e-mails via a webpage and its annoying to write a long email and only be able to see maybe the first paragraph without scrolling. I am currently zoomed out as far as possible while still making the font legible but I'd like to simply increase the field while keeping the same zoom level. Firefox 31.0 Windows 7 * Next Generation Java Plug-in 10.65.2 for Mozilla browsers * NPRuntime Script Plug-in Library for Java(TM) Deploy * Shockwave Flash 14.0 r0 * Adobe PDF Plug-In For Firefox and Netscape 11.0.07 * 5.1.30214.0 * Citrix Online App Detector Plugin * VLC media player Web Plugin 2.1.3 * ActiveTouch General Plugin Container Version 105 * Adobe Shockwave for Director Netscape plug-in, version 12.0.6.147 * Adobe Shockwave for Director Netscape plug-in, version 12.0.5.146 * The plugin allows you to have a better experience with Microsoft Lync * The plugin allows you to have a better experience with Microsoft SharePoint * NPWLPG * Intel web components updater - Installs and updates the Intel web components * Intel web components for Intel® Identity Protection Technology * The plug-in allows you to open and edit files using Microsoft Office applications * Office Authorization plug-in for NPAPI browsers

Modified by ksauer

Chosen solution

A DIV that has contenteditable=true to make it editable is not a normal text area, but a rich text area that accepts HTLM code and thus is not resizable this way.

Read this answer in context 👍 0

All Replies (10)

more options

hello, <textarea> elements are resizible by default in firefox: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

more options

That is done via the resize CSS property on a text area and should work for this forum and otherwise for text areas that haven't disabled it (it is enabled by default). You should see a (faint) resizer element in the lower right corner and get a resize mouse pointer if you move the mouse on that resizer element.

more options

http://dev.l-c-n.com/form-controls/resize_textarea.html

Leveraging this link allows me to test the different resize parameters (vertical/horizontal/etc). Sadly however I am not too familiar with where to 'edit' this particular parameter.

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

I have read the above link and understand how I need to change this parameter. I suspect that this is set by the webpage that I am interacting with. In order to correct this will I need to leverage a CSS editor or am I able to locate and modify this parameter via the Firefox tools?

Apologies for any lack of knowledge on the subject matter.

more options

Do you see the "grippy" on the textarea's on that demo page? (Screen shot) Does that work?

Unfortunately, rich text editors implemented using an iframe and an element of a document marked contenteditable do not necessarily have this kind of affordance built in. You might need to "hack" the page with custom style rules to resize the editing area to suit your needs.

As a starting point to investigating the kind of container it is, can you try using the Inspector feature? Right-click the editor > Inspect Element (Q), then click your way up the HTML "tree" until you find the outer container of the text.

Or if this is a commonly used site, someone here might have an account. Do you want to mention which one it is?

more options

I do see the 'grippy' on the textarea's demo page. However, I do not (within Firefox) on the page(s) I try to leverage. I do however when I use Chrome (I can't stand Chrome).

The page I am trying to leverage is Salesforce.com

Additionally, when leveraging the textarea within this support forums, the 'grippy' does exist as well which is why I thought that it may be page specific for this feature and Chrome simply has an add-on to overwrite this.

http://i.imgur.com/hhMOKOf.png

If I highlight (div class="htmlEditor" style="position: relative; height: 220px;") it outlines the textarea input section

Modified by ksauer

more options

Input areas won't have the resize grippy and rich text editor also not. You will only see this is a normal multi line textarea like used on this forum. You can check that via the right-click context menu in the Inspector.

more options

Just as a nomenclature note: a textarea form field is created by the <textarea> tag. What SalesForce apparently has is an editable division created by a <div> tag. Firefox doesn't automatically add the bits and pieces associated with a textarea field to a div.

Unfortunately, I think we closed our SalesForce account so I don't have access to that page. In searching a bit, I noticed this (unanswered) request: Expand email editor window - Ideas - Salesforce Success Community.

Maybe there is a more general solution, but I didn't find it in a search. Hopefully you will get a useful suggestion.

more options

Thanks team! I will reach out on my side to our SF team and I will have them look into it for me since it appears that the issue is more dedicated to their side more-so than my browser.

Appreciate all the help!

more options

Chosen Solution

A DIV that has contenteditable=true to make it editable is not a normal text area, but a rich text area that accepts HTLM code and thus is not resizable this way.

more options

It's at least theoretically possible to add a resizer to a contenteditable element. Here's a demo: http://jsfiddle.net/t19r4sv4/

But depending on what is inside of what, the resizer might not be usable due to other constraints, such as a fixed height on the surrounding table cell. I think "hands on" probably are needed to develop a fully functioning hack.