Resizable textarea behavior leads to unpredictable results [#735628]

Comment	File	Size	Author
#11	735628-11.patch	5.29 KB	Jacine

#4	735628-4.patch	5.31 KB	Jacine

#3	drupal.textarea.3.patch	3.32 KB	sun

#2	drupal.textarea.1.patch	4.43 KB	sun

	resizable-textarea.png	5.87 KB	sun

Comment #1

Jacine

she/her

New York

CreditAttribution: Jacine commented 8 March 2010 at 04:22

subscribing.

Log in or register to post comments

Comment #2

sun

German

Karlsruhe

CreditAttribution: sun commented 8 March 2010 at 04:41

Status:

Active

» Needs review

File	Size
drupal.textarea.1.patch	4.43 KB

Awesome.

Log in or register to post comments

Comment #3

sun

German

Karlsruhe

CreditAttribution: sun commented 8 March 2010 at 04:46

File	Size
drupal.textarea.3.patch	3.32 KB

Let's keep that .resizable-textarea class. Behaviors can be changed/overridden.

Log in or register to post comments

Comment #4

Jacine

she/her

New York

CreditAttribution: Jacine commented 8 March 2010 at 09:29

File	Size
735628-4.patch	5.31 KB

Cross-browser tested this with Garland, Seven and Stark and did some more work on it.

Removed the margin-right hack that was being applied to the grippie w/js
Removed the 95% nonsense from textareas and the filter-wrapper
Removed code from Seven that is no longer necessary with this being fixed.

The box-sizing: border-box was the key :D It looks pretty awesome cross-browser. IE6 and IE7 have a 2px wider textarea, but IMO it's not worth doing anything about. It's a HUGE improvement over the existing code! Yay :)

Log in or register to post comments

Comment #5

sun

German

Karlsruhe

CreditAttribution: sun commented 8 March 2010 at 14:33

Yay! :)

IE6 and IE7 have a 2px wider textarea, but IMO it's not worth doing anything about.

Would it be possible to post some screenshots? (I'll also leave a pointer to this issue in the previous fieldsets issue to get some xbrowser testing help)

+++ misc/textarea.js	8 Mar 2010 09:17:02 -0000
@@ -3,16 +3,14 @@
       // When wrapping the text area, work around an IE margin bug. See:
       // http://jaspan.com/ie-inherited-margin-bug-form-elements-and-haslayout
...
-      var textarea = $(this).wrap('<div class="resizable-textarea"><span></span></div>');
+      var textarea = $(this).addClass('resizable-textarea').find('textarea').wrap('<span></span>');

Does this mean we can also kill that comment and the wrapping SPAN?

+++ modules/node/node.css	8 Mar 2010 09:17:03 -0000
@@ -31,10 +31,6 @@ td.revision-current {
-.node-form textarea {

Nice catch! :)

+++ modules/system/system-behavior.css	8 Mar 2010 09:17:04 -0000
@@ -79,8 +79,13 @@ html.js fieldset.collapsible .fieldset-w
  * Resizable textareas
  */
...
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;

Could we document that border-box trick in the CSSDocBlock?

147 critical left. Go review some!

Log in or register to post comments

Comment #6

aspilicious CreditAttribution: aspilicious commented 8 March 2010 at 14:37

I'll unleash my multiple browser power on this patch soon.
Tell me what has to be tested, what can go wrong...

Log in or register to post comments

Comment #7

sun

German

Karlsruhe

CreditAttribution: sun commented 8 March 2010 at 15:08

This patch changes the markup of textareas AND resizable textareas. Both used completely different markup before, so we need to ensure that both are looking and working properly in all browsers.

You can test regular textareas by disabling JS in your browser, I think. Otherwise, I guess we need a new testing module with the following states:

1)
- #type textarea with #resizable FALSE
- #type textarea with #resizable TRUE
- #type text_format

2)
- above list again, but in a fieldset

3)
- above list again, but in a vertical tab

Log in or register to post comments

Comment #8

aspilicious CreditAttribution: aspilicious commented 8 March 2010 at 15:19

I almost don't dare to ask but can you make one sun? Your fieldset module was excellent...
It's for example not that easy to disable javascript in every browser.

Log in or register to post comments

Comment #9

cosmicdreams CreditAttribution: cosmicdreams commented 8 March 2010 at 15:52

Subscribing. Planning to test tomorrow night.

Log in or register to post comments

Comment #10

effulgentsia CreditAttribution: effulgentsia commented 8 March 2010 at 16:59

Subscribing. See also #281669: Usability: comment textareas should not be full-width. and #331852: Change 95% textarea width to 100%.

Log in or register to post comments

Comment #11

Jacine

she/her

New York

CreditAttribution: Jacine commented 9 March 2010 at 01:30

File	Size
735628-11.patch	5.29 KB

Oy, ~40 screenshots later: http://www.flickr.com/photos/jacine-rodriguez/sets/72157623367597578/det...

Still need to add docs to the patch, but this is what the screenshots are based on with Stark.

Log in or register to post comments

Comment #12

sun

German

Karlsruhe

CreditAttribution: sun commented 9 March 2010 at 01:44

Status:

Needs review

» Reviewed & tested by the community

Awesome, plain awesome. (you're nuts! XD)

Based on those screenshots and my own (limited) testing, it seems all browsers are either better than before or (in case of IE) rendering NOT worse than before. We can try to improve IE in a follow-up.

Log in or register to post comments

Comment #13

cosmicdreams CreditAttribution: cosmicdreams commented 9 March 2010 at 04:23

Status:

Reviewed & tested by the community

» Needs review

Brilliant!

Log in or register to post comments

Comment #14

Jacine

she/her

New York

CreditAttribution: Jacine commented 9 March 2010 at 04:56

Status:

Reviewed & tested by the community

» Needs review

@cosicdreams thanks :D

Did you mean to set the status to needs review though?

Log in or register to post comments

Comment #15

sun

German

Karlsruhe

CreditAttribution: sun commented 9 March 2010 at 04:55

Status:

Needs review

» Reviewed & tested by the community

I don't think so.

Log in or register to post comments

Comment #16

cosmicdreams CreditAttribution: cosmicdreams commented 9 March 2010 at 06:49

Status:

Needs review

» Reviewed & tested by the community

Sorry Jacine, I didn't realize I changed the status.

Log in or register to post comments

Comment #17

Jacine

she/her

New York

CreditAttribution: Jacine commented 9 March 2010 at 06:52

No worries at all ;) Just wanted to make sure.

Log in or register to post comments

Comment #18

Dries CreditAttribution: Dries commented 9 March 2010 at 11:45

Status:

Reviewed & tested by the community

» Fixed

Thanks for the crazy testing Jacine. Great work all. Committed to CVS HEAD.

Log in or register to post comments

Comment #19

sun

German

Karlsruhe

CreditAttribution: sun commented 9 March 2010 at 15:22

Awesome!

Quick follow-up: #737202: Vertical tabs don't use full available width

Log in or register to post comments

Comment #20

23 March 2010 at 15:30

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Log in or register to post comments

Comment #21

sun

German

Karlsruhe

CreditAttribution: sun commented 29 January 2012 at 16:23

FYI: #1138258: Drop textarea.js in favor of CSS3 resize makes textarea.js use jQuery UI for resizable textareas instead, but has some issues with the CSS/layout of the grippie.