Posted by sun on March 8, 2010 at 4:18am
| Project: | Drupal core |
| Version: | 7.x-dev |
| Component: | markup |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
...next one on my all time hit list:
| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| resizable-textarea.png | 5.87 KB | Ignored: Check issue status. | None | None |
Comments
#1
subscribing.
#2
Awesome.
#3
Let's keep that .resizable-textarea class. Behaviors can be changed/overridden.
#4
Cross-browser tested this with Garland, Seven and Stark and did some more work on it.
The
box-sizing: border-boxwas 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 :)#5
Yay! :)
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!
#6
I'll unleash my multiple browser power on this patch soon.
Tell me what has to be tested, what can go wrong...
#7
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
#8
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.
#9
Subscribing. Planning to test tomorrow night.
#10
Subscribing. See also #281669: Usability: comment textareas should not be full-width. and #331852: Change 95% textarea width to 100%.
#11
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.
#12
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.
#13
Brilliant!
#14
@cosicdreams thanks :D
Did you mean to set the status to needs review though?
#15
I don't think so.
#16
Sorry Jacine, I didn't realize I changed the status.
#17
No worries at all ;) Just wanted to make sure.
#18
Thanks for the crazy testing Jacine. Great work all. Committed to CVS HEAD.
#19
Awesome!
Quick follow-up: #737202: Vertical tabs don't use full available width
#20
Automatically closed -- issue fixed for 2 weeks with no activity.
#21
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.