When writing to right-to-left language the button becomes near the text which should be in the opposite side.
Click (Ctrl + right shift) to move the courser to right

Hello,

inside widearea.js:

//add widearea class to textarea
currentTextArea.className += (currentTextArea.className + " widearea").replace(/^\s+|\s+$/g, "");

The '+' should be eliminated to prevent duplicating the existing class name and to prevent destroying the css layout.

Hello,
We have just add widearea to twittstrap resources list
http://www.twittstrap.com/resources/details/widearea
Under : Forms
Regards

When you change the dimensions in FF and Chrome, the icon in the right top corner doesn't change positions.

From just looking at the code, there seems to be a missing comma/semi-colon. From the line:

wideAreaIcons    = document.createElement('div')

Which causes the fullscreenIcon variable to leak to global.

That said, if you haven't already, I would advice Linting/Hinting your code. There are some patterns you shouldn't do. Like all those defines inside loops.

Using this in a Ruby on Rails form_for when trying to set the value of a textarea with some text, Chrome does not add the text to the textarea box. Firefox has no problem with this.

This is with Chrome 27.0.1453.93 on OSX 10.7.5

After removing the data-widarea=enable, the form correctly loads the value of the text again.

When there is more content that can't fit in textarea widow and the scrollbar appears the icon overflows the scrollbar. But that also happens with zenmode here on github forms.

Adding:

width: 100%;
outline: none;

to prevent some problems and also outline border in Linux.

When using this with Rails with turbolinks (standard in Rails 4) you get an endless loop of:

Uncaught TypeError: Cannot read property 'offsetWidth' of null

I have several widescreen textareas on my screen. It seems that if I put my mouse in the center of the screen, the wideare becomes clickable, yet I'm no where near the actual button.

Any ideas on how to fix?

When expanded, TAB will change focus, but the expanded view means you can't tell what control does have focus. Not sure the best answer, but I would say one of two options:

1). Hitting tab actually inserts a tab character (most likely what the user wanted in the first place), which would also work the same when the view is normal (not expanded).

2. Hitting TAB functions the same was as hitting ESC, if the view is expanded, it returns to normal. Hitting TAB while not expanded continues to tab to the next element as usual.

How would you go about populating the full-screened text-box if the regular text-box has no placeholder text?

Heads up!
Just published a new gem that makes easier to integrate Widearea with Rails. 😃
Info: https://rubygems.org/gems/widearea-rails
Repo: https://github.com/victorgama/widearea-rails

I have an php-based Application, where a user can create and edit posts.
When I edit any post and submit the form, the Localstorage does not get flushed automatically, which prefills the textarea marked with data-widearea= true" whenever I edit another post. Of course, the Text coming from the localstorage is not the correct content when I edit another post/record, since it is the textareas content coming from the "last-edited" post.

Would it be possible to automatically call wideArea().clearData() whenever a form is submitted?

I know this is kind of an individual problem, but I can Imagine a lot of people are using wideare.js in contexts, where editing Records via the same form-templates is a normal workflow…

I'm sticking to v0.2 for now… just wanted to let you know!

Best regards and thanks for your great js-libraries!

On OS X if you enter fullscreen while the scrollbar is visible it will persist on the screen (see attached). I don't have time to investigate right now, but I'd imagine blurring/focusing will solve the problem.

STEPS TO REPRODUCE:

1. Enter enough text to cause the <textarea> to scroll
2. Move the mouse over the expand icon
3. Scroll and click

EXPECTED RESULTS:
The scrollbar disappears before entering fullscreen

ACTUAL RESULTS:
The scrollbar remains on the screen

NOTES:
The above repro steps are deceivingly convoluted – I was able to make it happen easily, but those steps help ensure it occurs.

ENVIRONMENT:
Mac OS X 10.8.3, Chrome 26.0.1410.65

ATTACHMENTS:

I'm using WideArea in a textarea with Text included

<textarea name="myinput" data-widearea="enable">Previous text</textarea>
<script>
wideArea();
</script>

Previous text is removed. I see a blank textarea in my Chrome.

I didn't see this until I resized my window for another purpose, and then I noticed that the fullscreen icon is duplicated and when we resize the screen, one of them stick to the same position and it is not a cache issue

on line 144 of widearea.js 0.3.0

currentTextArea.className += (currentTextArea.className + " widearea").replace(/^\s+|\s+$/g, "");

This will produce:

<textarea class="form-controlform-control wideared"></textarea>

It should be written like this:

currentTextArea.className = (currentTextArea.className + " widearea").replace(/^\s+|\s+$/g, "");

Commit dd03618 has a typo on line 213 and broke it.

In the demo, if I drag the expand icon to textarea zone, appears the text javascript:void(0); in the textarea. I understand it's better in this case if puts nothing, right?

I'm using firefox 20.0.

How would I disable what had been created by a widearea() call? I am using it in a backbone.js application and when I change views I would like to disable and remove the result of calling widearea(). Do I only need to remove the generated html? Or is there more cleanup to do? Thanks for the help.