bgrins / expandingtextareas Goto Github PK

I have set in the css the textarea to have a min-height of 66px. But when shown in browser, it is 100px. I realised there is the follwoing line when rendered in the browser:

Could we solve this by listening to the 'change' event?

Re: #50 Could we auto-initialise the plugin on keydown rather than on DOM ready? Something like:

$(document).on('keydown.expanding', 'textarea.expanding', function() {
  var $this = $(this);
  if (!$this.expanding('initialized')) {
    $this.expanding();

    // Prevent `keydown.expanding` from firing on this textarea(?)
    $this.off('keydown.expanding'); 
  }
});

I’m no sure off would work, but this might solve issues with .expanding textareas that are inserted into the DOM. Just a thought.

Placing an expanding textarea next to a floating div, such as a field label, causes the textarea to render on top of the div in Chrome, but not Firefox or IE:

http://jsfiddle.net/bbpennel/NvHr7/

While trying to figure out what was going on, I toggled off and on the position rule on the embedded textarea and found doing so magically fixed the positioning issue.

Changing positioning to static, forcing a redraw, and then switching back to position:absolute seems to do it:
http://jsfiddle.net/bbpennel/ge856/1/

Just trying to trigger a redraw is enough though.

I am playing the page http://bgrins.github.com/ExpandingTextareas/, and each time, you click "Enter", there will be extra space entered below.

I will do some research to see if I can come up with a patch. Other than that, the plug in really works great.

I'm using the ExpandingTextareas plugin, and I have a foundation reveal ajax call to load some data, and on document ready I'm using $("#foo").expanding(); but I'm getting the following error

ExpandingTextareas: attempt to initialize an invisible textarea. Call
expanding() again once it has been inserted into the page and/or is
visible.

How can I get this to find the dynamically added data? If I check the source code the textarea is definitely there.

I've tried adding a delay to the initialization but no luck :(

Reported by @brianmhunt

http://jsfiddle.net/cBcTq/3/

Hi, Thanks for great auto-expanding plug-in for textarea.

I have an issue in FF latest version (35.0) on Windows. I set rows="1" for my textarea and it is calculated as min-height:51px for single row.
The textarea element \has short word value like "Apr", "Save", "Cancel", etc

browser: FF 35.0
OS: Windows 7.0
placement: The <textarea> elements are nested in tag.
value: Short single word (less than 10 characters)
plugin version: 0.2.0

It works correctly on Chrome (min-height:34px), but on FF it does not.

Thanks,
Paul.

Because <pre> doesn't like to wrap for consecutive whitespace, this approach results in some strange behavior.

Try filling up a line and then adding a couple of spaces afterwards. One would expect the textbox to wrap, but it doesn't.

When using both ExpandingTextareas and jqTransform, it seems that min-height is ignored.

It appears that the package expanding-textareas cannot be found on NPM, though it's referenced in the README. Would the maintainer be able to push at least the latest version to NPM?

You'll probably have to checkout the tagged release, then do a publish to NPM:

git checkout 0.3.0
npm publish --tag 0.3.0

Hello, love this plugin. I have one issue and that's with people with IE9. The textarea expands nicely but when you backspace to remove characters or highlight and delete them the textarea does not contract until the user begins typing again.

Thank you for your time and effort creating this plugin! There's a whole bunch of these autogrow plugins floating around the internet but your version takes home the cake!

One thing I haven't quite nailed yet is how to use a class name instead of an id to call this plugin, if even possible. The reason being that I'm using the plugin in a script that dynamically creates textareas, hence the id is unknown. Of course I could make it work (and in fact, made it work) by also creating the call on the fly, like so (shortened for brevity):

echo '<script>$(document).ready(function(){$("#'.$textareaid.'").expandingTextarea();});</script>';

But graceful, as I'm sure you'd agree, it is not. Thanks in advance!

I have a problem with attaching expandingTextarea plugin to hidden (display:none) textarea .. I have a button that triggers textarea visiblity... any clues how to fix this?

regards

Armando

when i have a textarea with two rows the height will still be set to one line

I'm having an issue in Firefox 7 where the Textareas show up almost as small as possible, expand to one line if text is put in and force to scroll for the rest. Works fine in Chrome & Safari.

Any idea what the issues could be related to?

To highlight the differences between 0.x and 1.0

I am trying to get this awesome script to work on my newest project. I have used it tons in the past but all of those sites had jQuery Library. This current site has no jQuery and I don't want to require the jQuery library just to use this one script.

In the following code simply using:
textarea.expanding();
does not work. Nor do several other things I have tried, like using the new Expanding('textarea') creator;

Here is what I am doing:

    function editDiv(div){
        originalContents = div.innerHTML;
        var parent = div.parentNode;

        textarea.value = originalContents.trim();
        parent.appendChild(textarea);
        textarea.focus();

        // Find a way to change this to be just raw JS and not use jQuery.
        $('textarea').expanding();

        save = saveContent.bind(this, div, parent);
        textarea.addEventListener('blur', save, false);
    }

Please provide a solution for my use case.
Cheers

If I jQuery( "textarea" ).val( "Some very long string..." ) the textarea doesn't expand. Maybe a listener for "onchange" could be added, or at least a manual function : .expanding( "update" )?

For my own use I've added an .expanding( "update" ) method for my use (copied the idea of .expanding( "destroy" )). I thought .expandingTextarea( "resize" ) (from the v.0.1 version) used to do this?

@bgrins I have been working on a version of this idea which does not depend on jQuery. It takes quite a different approach, but uses some of the ideas present in this repo.

Would you be happy for me to start a new repo with this new code and publish it to NPM?

I figured it would be better to move this to its own issue. Take a look at http://jsfiddle.net/pmXxK/15/ and let me know what you think. It checks the box-sizing css property and uses width() or outerWidth() accordingly.

The other option may be to never clone the padding-left, padding-right, margin-left and margin-right and always calculate the width of the pre using outerWidth(true);

Awesome plugin!

Is there any way to expand the text area and its containing div upwards instead of downwards?
Like for example in slack chat! ( https://slack.com/ )

There are some situation where it’d be handy to reinitialise the plugin to adjust to new situations e.g. when percentage padding is used and the window is resized.

Rather than ignoring subsequent calls to the plugin, should we reinitialise it? i.e. keep the additional elements intact, but recalculate styles, and perhaps override any options passed in e.g. update callback

Thoughts?

There are currently a few different ways to name various parts of the plugin:

Project name:                ExpandingTextareas
Source filename:             expanding.js
jQuery method name:          expandingTextarea()
Container class name:        expandingText
Initial selector class name: expanding
Init class name:             expanding-init
Clone class name:            textareaClone
Event namespace:             expanding

May I suggest the following to improve consistency?:

Project name:                ExpandingTextareas (unchanged)
Source filename:             expanding.js (unchanged)
jQuery method name:          expanding()
Container class name:        expanding
Initial selector class name: expanding__textarea
Init class name:             expanding__textarea--init
Clone class name:            expanding__clone
Event namespace:             expanding (unchanged)

(CSS class names based on BEM)

Thoughts?

When the textarea is in a fixed-width table, it does not work as expected. Here is an example:

http://jsfiddle.net/bmh_ca/4QcaR/

I use these properties on some of my textareas where the content may get far too wide to fit reasonably on the page, so I want those textareas to expand only vertically but use a scrollbar for horizontally overlong content.

I’ve been handling that by patching the library to copy these properties because I’ve always assumed there is a reason it doesn’t do that out of the box. Am I mistaken? Is this a change I could upstream?

Hi there.

I need to add a custom class to the wrapper which is created by the expanding plugin, but I don't know if it is possible to do it and how.

Thanks.

The invisible element adjusts its size correctly, but the textarea doesn't expand.

is there any way by which I can limit the height of the textarea, after exceeding the limit height, it should start showing jquery scrollbar

There is a scenario where the affected textarea (and hidden pre tag) will expand to the width of its content, without wrapping.

Prerequisites:

1. Any parent div of the affected textarea is a fieldset.
2. Textarea content is one string of alphabetical/numerical characters, that is long enough to wrap.

Result:

Affected textarea (and hidden pre tag) will expand to a width as long as the content.

Problem:

Webkit puts a default style of min-width: -webkit-min-content; on a <fieldset>.

Personal Resolution:

• For my project, I set min-width to 0 on the culprit fieldset.

Note:

Excellent plugin. Best I found, and there are many options.

If you look at your demo in IE11 you can clearly see text jitter on pressing enter.

css "min-height" in IE8 is double what's necessary

Nifty little tool - thanks for putting it together in a jQuery sort of way after the initial alistapart version. I have one problem, though. I have a textarea that is sometimes filled with content in response to change in another field. In that case, it doesn't expand until some other action triggers the JS, like typing in the textarea. Here is my markup (a couple elements omitted for simplicity):

<form name="contactform" id="contactform" method="post" action="/individual.php?pid=5149#contacts" onSubmit="return ValidateContact()">
  <label class="label-n-input">Type: <select size="1" id="ctype" name="ctype">
    <option value="NULL">Select...</option>
    <option value="18">An option</option>
  </select></label>
  <textarea id="contactdesc" name="desc" class="expanding" wrap="virtual"></textarea>
  <input type="submit" value="Save Contact Entry" name="newcontact">
</form>

And my JS:

$(document).ready(function(){
  $("#ctype").change(function(){  //insert template text in Contact description when applicable ContactType is selected
    if (!$.trim($("#contactdesc").val())) {
      $("#contactdesc").load("ajax_request.php",{'req':'ContactTemplate','ctid':$("#ctype").val()});
    }
  });
});

Is there another event I should use to kick it into gear? Or call something of yours after the load() call?

To make it easier to support both npm and bower.

Adding explicit support for Bower and making it available on the bower repository would be very helpful! We can still access the project by specifying the repository manually, but obv it would be easier if it were bowerized.

Is there a problem in the latest commit? I've been trying to get this to work in a basic implementation and it functions like a normal textarea without expanding at all. I've tried it in both Chrome and IE9 with no success. I hope I'm just missing something basic. Here is my code:

<style>
  textarea {
    overflow: hidden;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="js/expanding.js"></script>

<textarea id="textarea" class="expanding" placeholder="This is some placeholder text"></textarea>

Thanks.